asp.net mvc - Foreach not updating HTML list elements -
using knockout 2.2.0 i'm trying use same dialog add , edit. have code working, when replace observable new edited one, doesn't cause update in foreach (or @ least continues display old values) update actual model, can see in dev tools. tried force update .valuehasmutated(), no luck.
self.editreference = function () { self.isedit(true); self.open(); self.dialogreferences(this); }; self.saveeditreference = function () { self.references.replace(this, self.dialogreferences); self.references.valuehasmutated(); self.dialogreferences(newreferences()); self.close(); };
and here of partial view references section of html code:
<ul class="sortable references-summary" data-bind="foreach: references"> <li class="ui-state-default"><b>name: </b><!-- ko text:name --><!-- /ko--><br /><b>company: </b><!-- ko text:company --><!-- /ko--><a href="#" data-bind="click: $parent.removereference"><span class="ui-icon ui-icon-closethick"></span></a><a href="#" data-bind=" click: $parent.editreference"><span class="ui-icon ui-icon-wrench"></span></a></li> </ul>
thanks crimsonchris pointing out bug. updated code below works expected.
the approach have reference editing, in addition references in array. when start edit, copy values array edit reference. when save edit, copy them back. there no need valuehasmutated
work.
function reference(name, company) { return { name: ko.observable(name), company: ko.observable(company) }; } // copy r1 r2 reference.copy = function(r1, r2) { r2.name(r1.name()); r2.company(r1.company()); } var self = { editingreference: undefined, dialogreferences: reference('', ''), references: ko.observablearray([ reference('one', 'first company'), reference('two', '2nd company') ]), dialogisopen: ko.observable(false), open: function() { self.dialogisopen(true); }, close: function() { self.dialogisopen(false); } }; self.editreference = function(item) { self.editingreference = item; self.open(); reference.copy(item, self.dialogreferences); }; self.removereference = function(item) { self.references.remove(item); self.close(); }; self.saveeditreference = function(item) { reference.copy(item, self.editingreference); self.close(); }; ko.applybindings(self);
<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script> <ul class="sortable references-summary" data-bind="foreach: references"> <li class="ui-state-default"> <b>name: </b> <!-- ko text:name() --> <!-- /ko--> <br /> <b>company: </b> <!-- ko text:company() --> <!-- /ko--> <a href="#" data-bind="click: $parent.removereference"><span class="ui-icon ui-icon-closethick"></span></a> <a href="#" data-bind="click: $parent.editreference"><span class="ui-icon ui-icon-wrench"></span></a> </li> </ul> <div data-bind="if: dialogisopen"> <div data-bind="with:dialogreferences"> <label>name</label> <input data-bind="value:name" /> <br/> <label>company</label> <input data-bind="value:company" /> <input type="button" value="save" data-bind="click: $parent.saveeditreference" /> </div> </div>
Comments
Post a Comment