javascript - 当绑定(bind)中的值更改时， knockout 计算函数不会更新

Question

我已经使用 Knockout 构建了一个级联下拉列表，但是级联部分 (ko.computed) 没有更新。

Knockout 版本为 3.0.0。

前言:

我正在使用树数据结构来对级联建模。

{ id: '', text: '', childItems: [] }

想法取自:

knockout.js - nested array data and cascading pre-populated dropdown lists binding

Fiddle

HTML:

<select data-bind="options: manufacturers,
                   optionsCaption:'Manufacturer',
                   optionsText: 'text',
                   optionsValue: 'id',
                   value: selectedManufacturer">
</select>
<select data-bind="options: models,
                   optionsCaption:'Model',
                   optionsText: 'text',
                   optionsValue: 'id',
                   value: selectedModel,
                   enable: enableModels">
</select>
<select data-bind="options: engines,
                   optionsCaption:'Engine',
                   optionsText: 'text',
                   optionsValue: 'id',
                   value: selectedEngine,
                   enable: enableEngines">
</select>

JS:

View 模型:

function ViewModel(items) {
    this.manufacturers = ko.observableArray(items);
    // These three observables should be numbers (e.g. 1)
    // Corresponding to the id
    this.selectedManufacturer = ko.observable();
    this.selectedModel = ko.observable();
    this.selectedEngine = ko.observable();

    function getById(items, id) {
        return ko.utils.arrayFirst(items, function(item) {
            return item.id === id;
        });
    }

    this.models = ko.computed(function(){
        var items = ko.utils.unwrapObservable(this.manufacturers);
        var id = ko.utils.unwrapObservable(this.selectedManufacturer);
        return id ? getById(items, id).childItems : [];
    }, this);

    this.enableModels = ko.computed(function(){
        var items = ko.utils.unwrapObservable(this.manufacturers);
        var id = ko.utils.unwrapObservable(this.selectedManufacturer);
        return id ? getById(items, id).value > 0 : false;
    }, this);

    // generate engines based on models
    this.engines = ko.computed(function(){
        var items = ko.utils.unwrapObservable(this.models);
        var id = ko.utils.unwrapObservable(this.selectedModel);
        return id ? getById(items, id).childItems : [];
    }, this);

    this.enableEngines = ko.computed(function(){
        var items = ko.utils.unwrapObservable(this.models);
        var id = ko.utils.unwrapObservable(this.selectedModel);
        return id ? getById(items, id).value > 0 : false;
    }, this);
}

数据:

var items = [
    { text: 'Ford', id: 1, childItems:
     [
         { text: 'F-150', id: 1, childitems:
          [
              { text: 'Gasoline', id: 1, childitems: [] },
              { text: 'Diesel', id: 2, childitems: [] }
          ]
         },
         { text: 'F-250', id: 2, childitems:
          [
              { text: 'Gasoline', id: 3, childitems: [] },
              { text: 'Diesel', id: 4, childitems: [] }
          ]
         }
     ]
    },
    { text: 'Honda', id: 2, childItems:
     [
         { text: 'Civic', id: 5, childitems:
          [
              { text: 'Gasoline', id: 5, childitems: [] },
              { text: 'Electric', id: 6, childitems: [] }
          ]
         },
         { text: 'Accord', id: 6, childitems:
          [
              { text: 'Gasoline', id: 7, childitems: [] },
              { text: 'Electric', id: 8, childitems: [] }
          ]
         }
     ]
    }
];

绑定(bind):

var module = {};

module.viewModel = new ViewModel(items);

ko.applyBindings(module.viewModel);

更新:

这是 complete working sample根据答案。

Answer 1

您的问题是，在您的“启用”计算中，您将返回找到的项目的 value 属性。您可能想要检查 childItems 是否存在，然后检查 childItems 的长度是否大于 0。

否则，您可以删除“启用”计算，并仅绑定(bind)选项的长度，例如 enable: models().length (如果长度为 0 则为假，如果长度大于则为真0).

这是一个更新的 fiddle :http://jsfiddle.net/rniemeyer/GWVW8/1/

还有一些拼写错误(childItems 与 childitems)。