Javascript 当绑定中的值更改时,敲除计算函数不更新
我用Knockout构建了一个级联下拉列表,但是级联部分(Javascript 当绑定中的值更改时,敲除计算函数不更新,javascript,knockout.js,Javascript,Knockout.js,我用Knockout构建了一个级联下拉列表,但是级联部分(ko.computed)没有更新 淘汰版是3.0.0 前言: 我正在使用树数据结构对级联进行建模 { id: '', text: '', childItems: [] } 想法来自: Html: 数据: 绑定: var module = {}; module.viewModel = new ViewModel(items); ko.applyBindings(module.viewModel); 更新: 这是基于答案的答案。您
ko.computed
)没有更新
淘汰版是3.0.0
前言:
我正在使用树数据结构对级联进行建模
{ id: '', text: '', childItems: [] }
想法来自:
Html:
数据:
绑定:
var module = {};
module.viewModel = new ViewModel(items);
ko.applyBindings(module.viewModel);
更新:
这是基于答案的答案。您的问题是,在“启用”计算中,您将返回找到的项的
值
属性。您可能需要检查childItems
是否存在,然后检查childItems
的长度是否大于0
否则,您可以删除“enable”计算,只需根据选项的长度进行绑定,如enable:models().length
(如果长度为0,则为false;如果长度大于0,则为truthy)
这里是一个更新的小提琴:
还有一些打字错误(
childItems
vs.childItems
)。谢谢你的回答!我确实需要第二双眼睛。
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: [] }
]
}
]
}
];
var module = {};
module.viewModel = new ViewModel(items);
ko.applyBindings(module.viewModel);