Обновление ViewModel с использованием пользовательских привязок KnockoutJS

Question

Итак, у меня этот SPA разработан с использованием this sample.

Образец показывает список Todo в табличном что-то вроде этого

<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> 

Теперь то, что я пытаюсь сделать здесь, как только я изменить Title текст, я пытаюсь изменить Artist текст, а также , для этого я создал пользовательскую привязку updateOnTitle и связал ее с текстовым полем, как показано в таблице. Его определение выглядит примерно так:

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"); 
      } 
    } 

Изменения не отражены в таблице выше. Оба эти свойства наблюдаемы. Я хотел бы знать, что именно я здесь не хватает?

Answer 1

Я также могу повернуть свой комментарий в ответ. Я считаю, что привязки обработчиков лучше подходят как общий подход к решению проблем, и он окупается, чтобы избежать привязки к определенному ViewModel (привязка относится к «художнику» и «названию»). A writeable computed observable может быть более подходящим для задачи.

Пусть следующий вид:

<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> 

Обратите внимание на первый вход, связанный с titleEditing, вычисленное наблюдаемой. ViewModel может быть определено с этими свойствами:

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'); 
}; 

Теперь, если вы обновляете первый вход, название изменится, и художник будет сброшен.

См. this fiddle для демонстрации.