使用自定义绑定KnockoutJS更新ViewModel

Question

So I have this SPA developed using this sample .

The sample shows the list of Todo in a table something like 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 what I am trying to do here is as soon as I change the Title text, I try to change Artist text as well, for that I have created a custom binding updateOnTitle and associated it with the textbox as shown in the table. Its definition looks something like this:

ko.bindingHandlers.updateOnTitle = {
    init:function(element,valueAccessor,allBindings,viewModel,bindingContext)
    {
           $(element).blur(function (evt) {
              //Here I am trying to update the artist property based on title
              bindingContext.$data.title("Title goes here");
              bindingContext.$data.artist("New Artist Name Here");
           }
    }

The changes are not reflected in the table above. Both these properties are observable. I would like to know what exactly am I missing here?

Answer 1

I may as well turn my comment into an answer. I think binding handlers are better suited as a general approach to solve problems, and it pays off to avoid having a binding rely on a specific ViewModel (your binding refers to "artist" and "title"). A writeable computed observable may be more suited for the task.

Suppose the 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 only version</h3>
Title: <span data-bind="text: title"></span><br />
Artist: <span data-bind="text: artist"></span>

Notice the first input is bound to titleEditing , the computed observable. The ViewModel could be defined with 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 you update the first input, title will change and artist will reset.

See this fiddle for a demo.