StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What I do is create one view model for the page and update the properties with the values from each call. I use the ko.mapping plugin with three parameters to update the existing observable array and make the properties observable. The <code>ko.mapping.fromJSON</code> calls will go in the success function of your AJAX call where you get the results, I just made them click handlers for simplicity. <a href="http://jsfiddle.net/jgoemat/v9XTf/" rel="nofollow">http://jsfiddle.net/jgoemat/v9XTf/</a></p> <pre><code>var jsonLocations = '[{"name":"home"},{"name":"work"}]'; var jsonServers = '[{"name":"Mercury"},{"name":"Venus"}]'; var jsonTenants = '[{"name":"Betty"},{"name":"Frank"}]'; function ViewModel() { var self = this; self.locations = ko.observableArray(); self.servers = ko.observableArray(); self.tenants = ko.observableArray(); self.loadLocations = function() { ko.mapping.fromJSON(jsonLocations, {}, self.locations); }; self.loadServers = function() { ko.mapping.fromJSON(jsonServers, {}, self.servers); }; self.loadTenants = function() { ko.mapping.fromJSON(jsonTenants, {}, self.tenants); }; } var my = { vm: new ViewModel() }; ko.applyBindings(my.vm); </code></pre> <p><strong>edit</strong> - <a href="http://jsfiddle.net/jgoemat/6xzFW/1/" rel="nofollow">Updated Fiddle</a></p> <p>If the locations contain the tenants, you can modify that property on the location, the ko event handler passes the current model to the handler:</p> <pre><code>self.loadServers = function(location) { ko.mapping.fromJSON(jsonServers, {}, location.Servers); }; </code></pre> <p>If you're binding with jQuery, you can use <code>ko.dataFor(element)</code> to get the model from the context where the element is:</p> <pre><code>$('.loadAll').live('click', function(e) { var location = ko.dataFor(this); // location can be used in success callback of ajax ko.mapping.fromJSON(jsonServers, {}, location.Servers); ko.mapping.fromJSON(jsonTenants, {}, location.Tenants); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload