javascript - Knockout-kendo 问题通过计算可观察的绑定(bind)

Question

我正在尝试使用 knockout-kendo.js 在 knockout forEach 模板中声明一个 kendo 下拉列表控件，以便在将新项目添加到 knockout observable 数组时，在 UI 中呈现新的 kendo 下拉列表。

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

为了克服这个问题，我在以下线程中遵循了 RP Niemeyer 的建议: Set the binding of a dropdown in knockout to an object

现在，一切正常。太好了。

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

我根据 RP Niemeyer 的原始 fiddle 创建了一个 fiddle 来演示我的问题:

Original Fiddle (RP Niemeyer's)

My Fiddle With Issues

我在 fiddle 中添加了以下几行:

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 发生变化)也会导致绑定(bind)到“selectedChoice”或任何 selectedChoices 属性的任何 UI 元素具有重新评估它们的绑定(bind)并分别更新 UI。

我错过了什么吗？或者是否有更好的方法来实现这种“下拉列表链接”行为(同时仍然使用挖空模板和剑道下拉列表控件)？

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

然后你的绑定(bind)变成:

<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