javascript - Edit newly added items within array of objects and update DOM -

here's jsfiddle.

the array of objects looks below:

var data = [{   "conferenceusers": [{     "id": 3006,     "conferenceid": 8,     "name": null,     "email": "mail@lala.com",     "username": null,     "phonenumber": "234234234234"   }],   "id": 8,   "subject": "yyyhaaaaa",   "starttime": "2016-05-29t18:30:00",   "endtime": "2016-05-29t19:30:00",   "organizeremail": "elpas@live.com",   "organizername": "dasdasd", }, {   "conferenceusers": [{     "id": 3013,     "conferenceid": 12,     "name": null,     "email": "dsfdfsdfdsf@dfdfdf.com",     "username": null,     "phonenumber": null   }],   "id": 12,   "subject": "dsfsdfdsfsdf",   "starttime": "2016-05-31t22:00:00",   "endtime": "2016-05-31t23:00:00",   "organizeremail": "d@adssad.com",   "organizername": "dsfdsfsdf" }]; 

i need able add , edit new conferenceusers.

adding new users works can't edit them.

conferenceuser viewmodel:

var conferenceuser = function (user) {     this.conferenceid = ko.observable(user.conferenceid);     this.email = ko.observable(user.email);     this.id = ko.observable(user.id);     this.name = ko.observable(user.name);     this.phonenumber = ko.observable(user.phonenumber); };  

conferencelist viewmodel , mappings:

var createconferenceuser = function (user) {     return new conferenceuser(user); };  var conferencelist = function(conferencesjson) {   var self = this;    var users = [];   (i = 0; < conferencesjson.length; i++) {       users.push(conferencesjson[i].conferenceusers);   }    this.conferences = ko.observablearray(conferencesjson.map(createconference));   this.conferenceusers = ko.observablearray(users.map(createconferenceuser));    this.addconference = function(conferencejson) {     self.conferences.push(createconference(conferencejson));   }; };  ko.applybindings(new conferencelist(data)); 

q: how can update existing / newly added conferenceusers , dom also, in jsfiddle?

like commented: if use conferenceuser view models observable properties, probable able figure out how both create new, , edit existing users. see other points of improvement though, think it's still worth formulate answer question:

• the edit/save/cancel logic cluttering conference view model , can separated own little widget
• the way you're switching between add , update button ui doesn't work knockout

i've written answer that's more architecture because feel answer question follows naturally defined separation of concerns. , because enjoy refactoring :)

here's suggestion after having moved stuff around. can decide how of you'll use, @ least answer question can found in code!

conferencelist

only serves manage list of conferences. extended removeconference or getconferencesfromserver etc.

var conferencelist = function(conferencesjson) {   this.conferences = ko.observablearray(conferencesjson.map(conference.create));    this.addconference = function(conferencejson) {     self.conferences.push(conference.create(conferencejson));   }; }; 

conference

holds list of conferenceuser instances , widget edit , create new users. this question answered:

var conference = function(conferencejson) {   var self = this;   this.id = conferencejson.id;    // note we're mapping plain objects json   // conferenceuser instances!   this.users = ko.observablearray(     conferencejson.conferenceusers.map(conferenceuser.create));    this.usereditor = new usereditor(this.users, this.id);    this.onuserclick = function(user, event) {     self.usereditor.edit(user);   }; }; 

conferenceuser

this make sure ui updated after edits: note email , phonenumber properties observable. didn't create observables properties indicate not properties meant changed in ui.

var conferenceuser = function(user) {   this.email = ko.observable(user.email);   this.phonenumber = ko.observable(user.phonenumber);    this.conferenceid = user.conferenceid;   this.id = user.id;   this.name = user.name; }; 

i've created static create method 2 reasons:

1. it keeps track of id inside closure make sure it's unique
2. it's easy use inside array.prototype.map method.

the code:

conferenceuser.create = (function() {   var id = 0;    return function(useroptions) {     // add id if not present in options     return new conferenceuser(object.assign(useroptions, {       id: useroptions.id || id++     }));   }; }()); 

usereditor

this biggest improvement (i believe) code: editor widget helps create, edit , save new users. methods exposes easier understand , write because they're not inside conference viewmodel.

var usereditor = function(users, conferenceid) {   var self = this;    // holds user that's being edited, null when   // creating new user   this.editing = ko.observable(null);    this.phoneinput = ko.observable("");   this.emailinput = ko.observable("");    this.clear = function() {     self.phoneinput("");     self.emailinput("");   };    this.add = function() {     var newuseroptions = {       email: self.emailinput(),       phonenumber: self.phoneinput(),       conferenceid: conferenceid     };     users.push(conferenceuser.create(newuseroptions));     self.clear();   };    this.edit = function(user) {     self.editing(user);      self.phoneinput(user.phonenumber());     self.emailinput(user.email());   };    this.reset = function() {     self.editing(null);     self.clear();   };    this.save = function() {     var currentuser = self.editing();      currentuser.email(self.emailinput());     currentuser.phonenumber(self.phoneinput());      self.reset();   };  }; 

now, after code, you'll see html straight forward. here's edit widget:

<div data-bind="with: usereditor">   <input type="tel" placeholder="phone number"      data-bind="value: phoneinput" />   <input type="email " placeholder="email"      data-bind="value: emailinput" />   <!-- ko ifnot: editing -->   <button data-bind="click: add">add</button>   <!-- /ko -->   <!-- ko if: editing -->   <button data-bind="click: save">save</button>   <button data-bind="click: reset">cancel</button>   <!-- /ko --> </div> 

kind of long story fix, if you've made far: here's updated fiddle! https://jsfiddle.net/e2ox4doj/