3

我有一个带有可观察对象数组的视图模型和一个计算的 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());

我很感激社区可以提供的任何支持！

谢谢

4

1 回答 1

1

除了}在你的代码中有一个额外的，你有一个“种子”的绑定问题：

  1. 你必须绑定 on selectedChoice().seeds，而不是selectedChoice.seeds因为selectedChoice它是一个函数，因此......
  2. 您必须检查何时绑定selectedChoice().seedsis selectedChoicenot null，否则绑定将失败并且您的应用程序崩溃，并且不再有效。

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

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

...或创建一个“selectedSeeds”计算函数来做同样的事情，但它增加了代码的可读性。

此外，要设置所选项目的“id”，您必须这样写：

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

evt更改事件在哪里。

这是分叉小提琴的工作结果。

于 2013-06-10T12:51:46.710 回答