knockout.js - 带 knockout 的级联 ListView

我有一个带有可观察对象数组的视图模型，以及一个计算出的selectedObject。我试图将KendoListView绑定到selectedObject中的可观察数组，但是ListView不会更新。

有一个小提琴在这里演示这个问题：

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());

感谢社区提供的任何支持！

谢谢

最佳答案

除了在代码中添加了}之外，您还对“种子”的绑定有疑问：

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

要解决第二个问题，您可以应用以下绑定：

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

...或创建一个“ selectedSeeds”计算函数，该函数将执行相同的操作，但是会增加代码的可读性。

另外，要设置所选项目的“ id”，您必须编写以下代码：

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

其中evt是更改事件。

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

关于knockout.js - 带 knockout 的级联 ListView ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17023554/

SelectedChoice

knockout.js - 带 knockout 的级联 ListView