Question

我正在使用knockoutJS来处理表格中网站名称和网址对的可编辑列表 - 下方有一个按钮可添加新项目。我的代码基于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());
}

有没有办法在运行时更改绑定 - 所以我可以将最后一项焦点作为提示给用户，他们应该填写它而不是创建更多空白行，例如类似的东西：

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

Answer 1

您可以通过使用observable绑定hasfocus而不仅仅hasfocus: true来实现此目的。

我喜欢这样做的一种方法是在场的主要观察点之外添加一个focused子观察点。类似的东西：

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"一样进行绑定，并在支票中设置关注的observable，使其姓氏为name.focused(true)。

以下是一个示例：http://jsfiddle.net/rniemeyer/NkYR5/

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

动态地向可观察数组中的特定项添加绑定（例如hasfocus）

1 个答案: