Reusing data between ViewModels in knockout.js

Question

I have an array of elements populated with an AJAX call to the ViewModel knockout that displays multiple data fields for each element on a web page.

Now I need the user to click on one element, filling the sidebar with the data obtained from the previous AJAX request (several fields plus much more).

I assume that id is usually required and execute a special AJAX item request, routing it through Sammy.js, but we don’t need to.

I am new to knockout; the best policy. I believe that to display data you need to have a ViewModel for various divs, but how to get ViewModels to transfer data between each other? Is it a taboo?

• Link to another window through a window object?
• Using a keyword with :? It continues to arise, but I do not see how to apply this in this context.
• Perhaps through Sammy.js and data caching in Amplify ?

This is an example of a drill-down function, and I read several StackOverflow Q&A articles, but couldn't find anything that I can use. I got to this stage following the John Papa PluralSight study guide.

Answer 1

You might want to go with the pub / sub model either using Amplify messaging or using the library @RPNiemeyer mentions. Both are great.

However, it looks like you just want to capture data from the server, and then use that data in multiple viewing models. It is even possible to share some of this data in several viewing models. The concept of datacontext in my SPA tutorial allows you to put data into a datacontext and reference it from other view models.

You can also use a library such as Breeze to help do this (Breeze will replace the datacontext in my SPA ... and it will be better on it, as I will show in the upcoming course).

These are just a few options.

Answer 2

You can also check the “ Share EntityManager ” in the “Cool Breeze” section of the documentation for the breeze.

Sharing a single EntityManager is probably all you need. But if you think you need more than one, read "Multiple Managers ."

Answer 3

As mentioned in the comments, a good option would be to use a knockout mailbox

knockout-postbox is a Knockout.js plugin designed to use the basic pub / sub features of Knockout to facilitate the decoupling of communication between individual models / presentation components.

This allows you to set up a simple communication on topics, for example:

var ViewModelOne = function() { this.isEditable = ko.observable(); }; var ViewModelTwo = function() { this.editable = ko.observable(false); }; var one = new ViewModelOne(); var two = new ViewModelTwo(); var editableTopic = "myEditableTopic"; one.isEditable.subscribeTo(editableTopic); two.editable.publishOn(editableTopic) 

Answer 4

IMO The easiest way to do this is to simply pass "params" with the observable containing the data to your sidebar component. http://knockoutjs.com/documentation/component-custom-elements.html#passing-observable-expressions