Knockoutjs 可观察绑定答案

【问题标题】：Knockoutjs Observable BindingKnockoutjs 可观察绑定
【发布时间】：2012-11-02 13:10:07
【问题描述】：

在下面的代码中，我希望跨度文本在单击测试按钮后显示“已单击测试”。我可以看到 selectedItem.title 正在更新。为什么这个数据绑定不起作用？

<button data-bind="click: setItem">Test</button>
Item <span data-bind="text: $root.selectedItem.title"></span>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

var viewModel = {};
viewModel.selectedItem = ko.observable();

viewModel.setItem = function() {
    viewModel.selectedItem({title: 'clicked'}); 
};

ko.applyBindings(viewModel);

【问题讨论】：

标签： knockout.js

【解决方案1】：

这里有两个错误：

1 .您正在对模型应用绑定并使用 title 属性，该属性在您单击按钮之前不存在。如果你使用模型的属性，你需要在绑定之前定义它：

viewModel.selectedItem = ko.observable({title: null});

2 。当你使用 observables 时，你需要在它们后面加上 ()，因为它不仅仅是一个变量，而是一个函数。所以你需要：

<span data-bind="text: $root.selectedItem().title">

你可以在这里玩http://jsfiddle.net/fMKPs/

【讨论】：