1

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

....
<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;
4

1 回答 1

2

您可以通过使用可观察对象来绑定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);
};

然后，绑定 likedata-bind="value: name, hasfocus: name.focused"并在您的检查中设置焦点 observable 以确保 last name 为空 like name.focused(true)。

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

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

于 2012-08-05T00:30:14.173 回答