Question

我有一个带有可观察对象数组的viewmodel和一个计算的selectedObject。我正在尝试将KendoListView绑定到selectedObject中的可观察数组，但ListView不会更新。

这里有一个小提示来证明这个问题：

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

除了在代码中添加额外}之外，您还遇到了“种子”绑定的问题：

您必须绑定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上的工作结果。

级联列表视图与淘汰赛

1 个答案:

级联列表视图与淘汰​​赛

1 个答案:

级联列表视图与淘汰赛