javascript - Update ViewModel using Custom Bindings KnockoutJS -

so have spa developed using this sample.

the sample shows list of todo in table this

<section id="lists" data-bind="foreach: todolists, visible: todolists().length > 0"> <table width="100%" style="margin-top: 20px;" class="table-main">   <thead>                           <tr class="b-table-line">    <th>select</th>    <th>title</th>    <th>artist</th>   </tr>  </thead> <tbody data-bind="foreach: todos">  <tr>   <td>    <input type="checkbox" data-bind="checked: isdone" /></td>     <td>      <input class="todoiteminput" type="text"       data-bind="value: title,       disable: isdone,       bluronenter: true,       updateontitle:true,       click: $root.clearerrormessage" />      </td>     <td>     <input class="todoiteminput" type="text"     data-bind="value: artist,     click: $root.clearerrormessage" />   </td>  </tr> </tbody> </table> 

now trying here change title text, try change artist text well, have created custom binding updateontitle , associated textbox shown in table. definition looks this:

ko.bindinghandlers.updateontitle = {     init:function(element,valueaccessor,allbindings,viewmodel,bindingcontext)     {            $(element).blur(function (evt) {               //here trying update artist property based on title               bindingcontext.$data.title("title goes here");               bindingcontext.$data.artist("new artist name here");            }     } 

the changes not reflected in table above. both these properties observable. know missing here?

i may turn comment answer. think binding handlers better suited general approach solve problems, , pays off avoid having binding rely on specific viewmodel (your binding refers "artist" , "title"). writeable computed observable may more suited task.

suppose following view:

<h3>inputs</h3> title: <input type="text" data-bind="value: title, valueupdate: 'afterkeydown'" /><br /> artist: <input type="text" data-bind="value: artist, valueupdate: 'afterkeydown'" />  <hr />  <h3>read version</h3> title: <span data-bind="text: title"></span><br /> artist: <span data-bind="text: artist"></span> 

notice first input bound titleediting, computed observable. viewmodel defined these properties:

function viewmodel() {     var self = this;      var _title = ko.observable('my title');     self.title = ko.computed({         read: _title,         write: function(newval) {             _title(newval);             self.artist('new artist name here');         }     });      self.artist = ko.observable('john doe'); }; 

now, if update first input, title change , artist reset.

see this fiddle demo.