knockout.js - 带 knockout 的级联 ListView

Question

我有一个 View 模型，其中包含可观察的对象数组和计算出的 selectedObject。我试图将 KendoListView 绑定(bind)到 selectedObject 中的可观察数组，但 ListView 没有更新。

这里有一个 fiddle 演示了这个问题:

http://jsfiddle.net/JrJ2q/3/

HTML:

<div data-bind="kendoListView: {  data: fruits, template: template, selectable:'single', change: function(e){ selectedId(this.select().index())} }" ></div>
<hr/>
<div data-bind="kendoListView: {data: selectedChoice.seeds, template: template2 }"></div>
<hr/>
Selected Id: <strong data-bind="text: selectedId"> </strong>
<hr/>
<pre data-bind="text: ko.toJSON(selectedChoice, null, 2)"></pre>

JavaScript:

var ViewModel = function() {
template = '<div>#=name#</div>';
template2 = '<div>Anything</div>';
fruits = ko.observableArray([
    { id: "0", name: "apple", seeds: [
     {number: "1"},{number:"2"},{number:"3"}]
    },
    { id: "1", name: "orange", seeds: [
     {number: "11"},{number:"12"},{number:"13"}]
    },
    { id: "2", name: "banana", seeds: [
     {number: "21"},{number:"22"},{number:"23"}]
    }
]);

selectedId = ko.observable();
selectedChoice = ko.computed(function() {
    var id = selectedId();
    if (id) {
        return ko.utils.arrayFirst(fruits(), function(fruit) {
           return fruit.id === id; 
        });
    }

}, this);
};

ko.applyBindings(new ViewModel());

非常感谢社区提供的任何支持!

谢谢

Answer 1

除了代码中存在额外的 } 之外，您还遇到了“种子”绑定(bind)的问题:

1. 您必须绑定(bind) selectedChoice().seeds，而不是 selectedChoice.seeds，因为 selectedChoice 是一个函数，因此...... .
2. 在 selectedChoice().seeds 上绑定(bind)时，您必须检查 selectedChoice 不为 null，否则绑定(bind)将失败并且您的应用程序崩溃，并且不再起作用。

要解决第二个问题，您可以应用以下绑定(bind):

<div data-bind="data: selectedChoice() ? selectedChoice().seeds: []">/div>

...或者创建一个“selectedSeeds”计算函数来执行相同的操作，但它增加了代码的可读性。

此外，要设置所选项目的“id”，您必须编写以下内容:

selectedId(evt.sender.dataSource.view()[evt.sender.select().index()].id)

其中 evt 是更改事件。

这是在 forked fiddle 上的工作结果.