javascript - 在 knockout 中添加具有多个属性的新项目

我试图在单击按钮时将新项目添加到可观察数组。我几乎在敲门（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成为可观察对象，则无需这样做。

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

在1.3之前的版本中，可以将模板绑定与data参数一起使用，以执行以下操作：http://jsfiddle.net/rniemeyer/sb6vD/