在knockout.js中添加具有多个属性的新项目

Add new item with multiple properties in knockout.js

本文关键字：属性 新项目 knockout js 添加      更新时间：2023-09-26

我试图添加一个新的项目到一个可观察数组当一个按钮被点击。我几乎在knockout.js网站上遵循这个例子:http://knockoutjs.com/examples/betterList.html

相关的HTML:

<form data-bind="submit:addItem">
    <input id="comment" data-bind="value:itemToAdd.comment, valueUpdate: 'afterkeydown'" />
    <input type="submit" value="Save contact" />
</form>

正如你所看到的(这是与示例的不同之处)，我的"itemToAdd"将有多个属性，其中一个是"comment"。所以我试着像这样绑定它:"value:itemToAdd.comment"(我也试过"value:itemToAdd().comment")。但这似乎行不通。这是我的视图模型的相关部分:

var viewModel = {

     contactHistory: [{comment: 'test', date: '12/12/2011'}, {comment: 'test2', date: '12/11/2011'}],
    itemToAdd: new ko.observable({ comment: 'dd', date: '' }),
    addItem: function () {
            alert(this.itemToAdd().comment);
                if (this.itemToAdd().comment != "")
                {
                    this.contactHistory.push(this.itemToAdd());
                }
            }
}

警告总是显示"dd"，所以itemToAdd似乎没有正确地绑定到文本框。有人知道我哪里做错了吗?

通常你会做itemToAdd().comment，但是当数据绑定中的属性不是一个可观察的并且是嵌套的时候，KO实际上不能正确地写。

你当然可以解决它，使comment一个可观察的:http://jsfiddle.net/rniemeyer/mFkGT/。在这种情况下，如果你不想让itemToAdd成为一个可观察对象，你就不需要让它成为一个可观察对象。

另一个选择是在绑定到comment之前进入itemToAdd的作用域。在1.3中，您可以使用with: itemToAdd: http://jsfiddle.net/rniemeyer/SDAhd/。如果您不想要额外的span，那么您可以使用无容器绑定，如:http://jsfiddle.net/rniemeyer/ZmDwW/.

在1.3之前，您可以使用带有data参数的模板绑定来执行如下操作:http://jsfiddle.net/rniemeyer/sb6vD/

相关文章：