knockout-kendo通过计算的可观察性发布绑定

Question

我正在尝试使用knockout -kend.js在knockout模板中声明一个kendo dropdownlist控件，这样当新的项被添加到knockout可观察数组中时，新的kendo dropdownlist就会呈现在UI中。

最初，我意识到我不能再将dropdownlist的选定值绑定到dropdownlist的指定“data”数组中的整个entry对象。

为了解决这个问题，我遵循了RP Niemeyer在以下帖子中的建议：Set the binding of a dropdown in knockout to an object

现在，这一切都起作用了。太棒了。

我的问题是，当试图向模板添加第二个下拉列表时，谁的数据被绑定到从计算的可观察对象返回的对象上的数组属性...(我需要链接下拉列表，以便第一个显示所有学生，第二个显示当前在第一个下拉列表中选择的学生的所有班级，第三个显示当前在第二个下拉列表中选择的班级的所有考试成绩，依此类推。)

我基于RP Niemeyer的原始小提琴创建了一个小提琴来演示我的问题：

Original Fiddle (RP Niemeyer's)

My Fiddle With Issues

我在小提琴中添加了以下几行：

HTML：

<input data-bind="kendoDropDownList: { dataTextField: 'caption', dataValueField: 'id', data: selectedChoice().shapes, value: selectedShapeId }" />

JS：

this.choices = ko.observableArray([
        { id: "1", name: "apple", shapes: ko.observableArray([ { id: "5", caption: "circle" }, { id: "6", caption: "square" }]) },
        { id: "2", name: "orange", shapes: ko.observableArray([ { id: "5", caption: "circle" }]) },
        { id: "3", name: "banana", shapes: ko.observableArray([ { id: "5", caption: "circle" }, { id: "6", caption: "square" }, { id: "7", caption: "triangle" }]) }
    ]);

同样，我期望在第一个下拉列表中的选择更改时(导致selectedId更改，导致selectedChoice更改)也会导致绑定到“selectedChoice”或任何selectedChoices属性的任何UI元素重新计算其绑定并分别更新UI。

我是不是遗漏了什么？或者，有没有更好的方法来实现这种“下拉列表链接”行为(同时仍然使用knockout模板和kendo下拉列表控件)？

Answer 1

让我给你一些建议。尽量避免访问可观察值的属性，正如您所看到的，依赖项检测并不总是能够检测到依赖项。您应该创建一个计算的可观察对象，它将为您执行访问。

var ViewModel = function () {
    // ...

    this.selectedChoice = ko.computed(function () {
        var id = this.selectedId();
        return ko.utils.arrayFirst(this.choices(), function(choice) {
           return choice.id ===  id;
        });
    }, this);
    this.selectedChoiceShapes = ko.computed(function () {
        var selectedChoice = this.selectedChoice();
        return selectedChoice && selectedChoice.shapes;
    }, this);
}

那么你的绑定就变成了：

<input data-bind="kendoDropDownList: {
                      dataTextField: 'name',
                      dataValueField: 'id',
                      data: choices,
                      value: selectedId }" />
<input data-bind="kendoDropDownList: {
                      dataTextField: 'caption',
                      dataValueField: 'id',
                      data: selectedChoiceShapes,
                      value: selectedShapeId }" />

updated fiddle

Answer 2

这似乎是使用Knockout的Kendo的一个缺点。当Kendo对selectedChoice().shapes求值时，它会保留找到的数组，而不是保留整个表达式。如果使用选项更新特定数组，则可以在第二个下拉列表中看到这些选项。问题是，当您更新selectedChoice时，Kendo不会对新的shapes数组重新计算数据。您可以在this fiddle中看到此行为。

打开JS控制台，将context设置为小提琴(默认为Chrome`中的top frame，运行：

window.vm.choices()[1].shapes.push({"id": "6", "caption" : "Thing"})

您将看到第二个dropdown更新。更改第一个下拉列表不会有任何效果。您可以看到，在不使用kendo的情况下，this fiddle淘汰会重新计算整个表达式，并正确地更新第二个select选项。