javascript - 动态地向可观察数组中的特定项目添加绑定(bind)(例如 hasfocus)

Question

我正在使用 knockoutJS 来处理表格中网站名称和 URL 对的可编辑列表 - 下面有一个按钮可以添加新项目。我的代码基于 lists and collections tutorial .

....
<tbody data-bind="foreach: website">
 <tr>
  <td><input data-bind="value: name, hasfocus: true" /></td>
  <td><input data-bind="value: url" /></td>
  <td><a href="#" data-bind="click: $root.removeWebsite">Remove</a></td>
 </tr>
</tbody>
</table>

<button data-bind="click: addWebsite" class="btn">Add another</button>

请注意，我使用 hasfocus: true 这样每次添加新的空白字段时，他们就不必用鼠标单击它。您还会在下面的代码(来自 viewmodel 函数)中看到，在我允许人们添加另一个文本框之前，我正在检查列表中最后一个文本框的内容。

// Add and remove
self.addWebsite = function() {

    var length = self.website().length;
    if (self.website()[length - 1].name == '') {
        // Last site in list has no name, don't allow them to add another
        return false;
    }

    self.website.push(new dashboardApp.website());
}

有没有一种方法可以在运行时更改绑定(bind) - 这样我就可以将最后一个项目作为焦点作为提示，提示用户他们应该填写它而不是创建更多的空白行，例如像这样的东西:

self.website()[length - 1].name.hasfocus = true;

Answer 1

您可以通过使用一个可观察对象来绑定(bind) hasfocus 而不仅仅是 hasfocus: true 来实现这一点。

我喜欢做这样的事情的一种方法是添加一个 focused sub-observable 离开该领域的主要 observable。像这样的东西:

var Site = function(name, url) {
    this.name = ko.observable(name);
    this.name.focused = ko.observable(true);

    this.url = ko.observable(name);
};

然后，像 data-bind="value: name, hasfocus: name.focused" 一样绑定(bind)，并在检查 last name 是否为空时设置 focused observable，如 name.focused (真)。

这是一个示例:http://jsfiddle.net/rniemeyer/NkYR5/

如果您的 name 和 url 不是可观察对象，那么您可以添加另一个专门用于控制焦点的可观察对象。