Question

所以我使用this sample开发了此SPA。

该示例在表格中显示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文字，因为我创建了自定义绑定{{1}并将其与文本框关联，如表中所示。它的定义看起来像这样：

updateOnTitle

更改未反映在上表中。这两个属性都是可观察的。我想知道我到底错过了什么？

Answer 1

我不妨将我的评论转化为答案。我认为绑定处理程序更适合作为解决问题的一般方法，并且可以避免绑定依赖于特定的ViewModel（您的绑定指的是“artist”和“title”）。 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，即计算的observable。可以使用以下属性定义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了解演示。

使用Custom Bindings KnockoutJS更新ViewModel

1 个答案: