淘汰赛剑道通过可计算的可观察性绑定

Question

我试图使用敲除-kendo.js在敲除forEach模板中声明kendo dropdownlist控件，以便在将新项目添加到敲除可观察数组中时，新的kendo dropdownlists呈现在UI中。

最初，我意识到我无法再将下拉列表的选定值绑定到下拉列表的指定“数据”数组中的整个条目对象。

为了克服此问题，我在以下线程中遵循了RP Niemeyer的建议： 设置击倒中的下拉列表与对象的绑定

现在，这一切正常。 大。

我的问题是，当尝试向模板添加第二个下拉列表时，谁的数据绑定到从可计算的observable返回的对象的数组属性上……（我需要链接下拉列表，以便第一个显示所有学生，第二个显示第一个下拉列表中当前选择的学生的所有课程，第三个显示第二个下拉列表中当前选择的学生的所有考试成绩，等等。）

我根据RP Niemeyer的原始小提琴创建了一个小提琴，以演示我的问题：

原始小提琴（RP尼迈耶的）

我的小提琴与问题

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

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”的任何UI元素或任何selectedChoices的属性重新绑定-评估和用户界面分别更新。

我想念什么吗？ 还是有一种更好的方法来实现这种“链接下拉列表”行为（同时仍使用敲除模板和kendo下拉列表控件）？

Answer 1

让我为您提供一些建议。 如您所见，请尝试避免访问可观察值的属性，依赖关系检测将无法始终能够检测到依赖关系。 您应该创建一个计算的observable来为您完成访问。

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 }" />

更新的小提琴

Answer 2

这似乎是Kendo使用Knockout的缺点。 当Kendo评估selectedChoice().shapes它将保留在找到的数组上，而不是保留整个表达式。 如果使用选项更新该特定阵列，则可以在第二个下拉列表中看到它们。 问题是，当您更新selectedChoice Kendo时，它不会将数据重新评估到新的shapes数组。 您可以在这个小提琴中看到这种行为。

打开JS控制台，将上下文设置为小提琴（默认为Chrome`的top frame ，然后运行以下命令：

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

然后您将看到第二个下拉更新。 更改第一个下拉菜单无效。 您可以看到，在没有kendo的情况下， 此 Knockout会重新评估整个表达式，并正确更新了第二个select选项。