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

Question

单击按钮时，我正在尝试将新项目添加到可观察数组中。我在 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 似乎没有正确绑定到文本框。有谁知道我做错了什么？

Answer 1

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

您当然可以通过将comment 设为可观察对象来解决它，例如：http://jsfiddle.net/rniemeyer/mFkGT/。在这种情况下，您不需要让 itemToAdd 成为可观察对象，如果您不希望它成为。

另一种选择是在绑定comment 之前进入itemToAdd 的范围。在 1.3 中，您可以使用 with: itemToAdd，例如：http://jsfiddle.net/rniemeyer/SDAhd/。如果您不想要额外的跨度，那么您可以使用无容器绑定，例如：http://jsfiddle.net/rniemeyer/ZmDwW/。

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