Knockback.js: How can I do a view refresh when a base save updates the model?

Question

This is my first experience with Knockback.js .

I am working on proving the concept of Knockback, but it's hard for me to change the view model when I save the model. In this case, the server returns a new Domain object with the specified id field, which means that the object now exists on the server. As soon as this happens, I would like the user interface to change to reflect the fact that it is now saved.

Here is the code I'm using:

 <table cellspacing="0" class="listing-table" id="domainListTable"> <thead> <tr> <th scope="col"> Domain </th> </tr> </thead> <tbody data-bind="foreach: domains"> <tr> <td> <!-- ko if:save --> <a data-bind="attr: { href: domainEditLinkdomainId, title: domain},text : domain"> <span data-bind="text: domain"></span> </a> <!-- /ko --> <!-- ko ifnot:save --> <input type="text" maxlength="250" style="display:inline-block;" class="medium-text-field" data-bind="value: domain"></input> <input data-bind="click: save" style="display:inline-block;" type="submit" value="Save New Domain" alt="" title=""/> <!-- /ko --> </td> </tr> </tbody> </table> <br /> <input data-bind="click: addDomain" type="submit" value="Add New Domain" alt="" title=""/> <script type="text/javascript"> var Domain = Backbone.Model.extend({ defaults: function() { return { domain: "New Domain" }; }, }); var Domains = {}; Domains.Collection = Backbone.Collection.extend({ model: Domain, url: '/cms/rest/poc/${customerId}/domains/' }); var domains = new Domains.Collection(); domains.fetch(); var DomainViewModel = kb.ViewModel.extend({ constructor: function(model) { kb.ViewModel.prototype.constructor.apply(this, arguments); var self = this; this.save = kb.observable(model, { key: 'save', read: (function() { return !model.isNew(); }), write: (function(completed) { return model.save({}, { wait: true, success: function (model, response) { console.log(model); console.log(response); console.log(self); }, error: function(model, response) { alert("Oh NooooOOOes you broked it!!!11!") } }); }) }, this); this.domainEditLinkdomainId = ko.dependentObservable(function() { if(!this.save()) return ""; return "cms?action=domainDetail&domainID=" + this.model().id; }, this); } }); var DomainsViewModel = function(collection) { this.domains = kb.collectionObservable(collection, { view_model: DomainViewModel }); this.addDomain = function() { this.domains.push(new DomainViewModel(new Domain())); }; }; var domainsViewModel = new DomainsViewModel(domains); ko.applyBindings(domainsViewModel); </script> 

The problem is that the XMLHttpRequest executed by model.save() does not return until the kb.observable save is kb.observable , and therefore the html part is not updated successfully because it still sees model.isNew() as true,

I came up with several ideas, as you can see, including using the valueHasMutated method on the observable to indicate that the model has been updated, but I cannot figure out how to do this.

Any help would be greatly appreciated!

Answer 1

You can listen to the change:id event on the model.

This will only work when the state of the model has changed from new to constant.