javascript - KnockoutJS Data disappears when I add a new item to array -
view issue on jsfiddle: http://jsfiddle.net/6bfsy/3/
when click "add users" , click "add users" again of data in extensions drop down field disappears. happened after added email column. email field gets pre-populated whatever selected in extension dropdown (email part of object).
also, extensions drop down unique per line, part of script tells remove array if exists on previous line.
js
window.usrviewmodel = new function () { var self = this; window.viewmodel = self; self.list = ko.observablearray(); self.pagesize = ko.observable(10); self.pageindex = ko.observable(0); self.selecteditem = ko.observable(); self.extdata = ko.observablearray(); self.validaccess = [{ 'name': 'no access', 'id': 'none' }, { 'name': 'system settings', 'id': 'pbx' }, { 'name': 'accounting', 'id': 'billing' }, { 'name': 'full administrator', 'id': 'full' }]; self.availableextdata = ko.computed(function () { var inuse = []; if (!self.selecteditem()) return inuse; ko.utils.arrayforeach(self.list(), function (item) { if (inuse.indexof(item.usrextval().extension) == -1 && self.selecteditem() != item) inuse.push(item.usrextval().extension); self.selecteditem().usremail(self.selecteditem().usrextval().email); }); return ko.utils.arrayfilter(self.extdata(), function (item) { return inuse.indexof(item.extension) == -1; }); }); self.edit = function (item) { if (self.selecteditem()) self.save(); self.selecteditem(item); }; self.cancel = function () { self.selecteditem(null); }; self.add = function () { if (self.selecteditem()) self.save(); var newitem = new users(); self.selecteditem(newitem); self.list.push(newitem); self.movetopage(self.maxpageindex()); }; self.remove = function (item) { if (confirm('are sure wish delete item?')) { self.list.remove(item); if (self.pageindex() > self.maxpageindex()) { self.movetopage(self.maxpageindex()); } } $('.error').hide(); }; self.save = function () { self.selecteditem(null); }; self.templatetouse = function (item) { return self.selecteditem() === item ? 'editusrs' : 'usritems'; }; self.pagedlist = ko.dependentobservable(function () { var size = self.pagesize(); var start = self.pageindex() * size; return self.list.slice(start, start + size); }); self.maxpageindex = ko.dependentobservable(function () { return math.ceil(self.list().length / self.pagesize()) - 1; }); self.previouspage = function () { if (self.pageindex() > 0) { self.pageindex(self.pageindex() - 1); } }; self.nextpage = function () { if (self.pageindex() < self.maxpageindex()) { self.pageindex(self.pageindex() + 1); } }; self.allpages = ko.dependentobservable(function () { var pages = []; (i = 0; <= self.maxpageindex(); i++) { pages.push({ pagenumber: (i + 1) }); } return pages; }); self.movetopage = function (index) { self.pageindex(index); }; }; ko.applybindings(usrviewmodel, document.getelementbyid('usrform')); function users(fname, lname, email, phone, access, usrextval, usremail) { this.fname = ko.observable(fname); this.lname = ko.observable(lname); this.email = ko.observable(email); this.phone = ko.observable(phone); this.access = ko.observable(access); this.usrextval = ko.observable(usrextval); this.usremail = ko.observable(usremail); } var ajaxresultext = [{ 'extension': '123', 'name': 'stephen', 'email': 'test@test.com' }, { 'extension': '123', 'name': 'stephen', 'email': 'stephen@test.com' }]; usrviewmodel.extdata(ajaxresultext); html
<fieldset title="users"> <legend>2</legend> <div> <div class="cbp-content"> <form id="usrform"> <h2>users</h2> <table class="table table-striped table-bordered" data-bind='visible: pagedlist().length > 0'> <thead> <tr> <th>first name</th> <th>last name</th> <th>phone number</th> <th>access</th> <th>extension</th> <th>email</th> <th style="width: 100px; text-align:right;" /> </tr> </thead> <tbody data-bind=" template:{name:templatetouse, foreach: pagedlist }"></tbody> </table> <!-- ko if: 2 > pagedlist().length --> <p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> add users</a></p> <!-- /ko --> <div class="suponeusr" style="display:none;"><i class="icon-warning-sign"></i> <span style="color:red;">please supply @ least 1 user administrator rights</span></div> <div class="pagination pull-left" data-bind='visible: pagedlist().length > 0'> <ul><li data-bind="css: { disabled: pageindex() === 0 }"><a href="#" data-bind="click: previouspage">previous</a></li></ul> <ul data-bind="foreach: allpages"> <li data-bind="css: { active: $data.pagenumber === ($root.pageindex() + 1) }"><a href="#" data-bind="text: $data.pagenumber, click: function() { $root.movetopage($data.pagenumber-1); }"></a></li> </ul> <ul><li data-bind="css: { disabled: pageindex() === maxpageindex() }"><a href="#" data-bind="click: nextpage">next</a></li></ul> </div> <br clear="all" /> <script id="usritems" type="text/html"> <tr> <td data-bind="text: fname"></td> <td data-bind="text: lname"></td> <td data-bind="text: phone"></td> <td data-bind="text: access.asobject && access.asobject() && access.asobject().name"></td> <td data-bind="text: usrextval().extension"></td> <td data-bind="text: usremail"></td> <td class="buttons"> <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-edit"></i></a> <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a> </td> </tr> </script> <script id="editusrs" type="text/html"> <tr> <td><input data-errorposition="b" class="required" name="fname" data-bind="value: fname" /></td> <td><input data-errorposition="b" class="required" name="lname" data-bind="value: lname" /></td> <td><input data-errorposition="b" class="required" name="phone" data-bind="value: phone" /></td> <td><select class="accessselect" data-bind="options: $root.validaccess, optionstext: 'name', optionsvalue: 'id', value: access, valueasobject: 'asobject'"></select></td> <td><select id="extdata" data-bind="options: $root.availableextdata, optionstext: 'extension', value: usrextval"></select></td> <td><input id="extemail" data-errorposition="b" class="required" name="email" data-bind="value: usremail" /></td> <td class="buttons"> <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a> <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a> </td> </tr> </script> </form> </div> </div> </fieldset>
there few problems in code.
availableextdatatries access subproperties ofusrextval,undefined. access causes error, prevents further execution of computed. need first check ifusrextvalset.you have 2 entries in
ajaxresultext, both have same extension. once you've selected123first item, there aren't left second, because both123values removed. extensions need unique.you're updating
usremailwithin loop inavailableextdata, doesn't make sense. should in separateko.computed.
here example these fixes: http://jsfiddle.net/mbest/6bfsy/5/
Comments
Post a Comment