我正在尝试构建一个三步下拉系列。我能想到的最简单的例子是建立一个年份/品牌/型号下拉集。
我尝试按照示例并使用另一个小提琴（另一个小提琴 url 以 jsfiddle.net/rniemeyer/V2gvT/ 结尾），但是数据绑定有问题。
我的小提琴有一个要使用的年份/品牌/模型对象的静态列表，并且年份列表可以正确绑定，但永远不会让品牌/模型列表进行数据绑定。
简单标记
<label for="ddlYear">Year</label>
<select id="ddlYear" data-bind="options: years, value: selectedYear"></select>
<label for="ddlMake">Make</label>
<select id="ddlMake" data-bind="options: makes, value: selectedMake'"></select>
<label for="ddlModel">Model</label>
<select id="ddlModel" data-bind="options: models"></select>
脚本
var viewModel = {
selectedYear: ko.observable(""),
selectedMake: ko.observable(""),
selectedModel: ko.observable("")
};
viewModel.years = ko.dependentObservable(function() {
return Enumerable.From(makeModelList).Select(function(it) {
return it.year;
}).OrderBy(function(it) {
return it.year;
}).Distinct().ToArray();
}, viewModel);
viewModel.makes = ko.dependentObservable(function() {
var selectedYear = this.selectedYear();
return Enumerable.From(makeModelList).Where(function(it) {
return it.year == selectedYear;
}).Select(function(it) {
return it.make;
}).ToArray();
}, viewModel);
viewModel.models = ko.dependentObservable(function() {
var selectedYear = this.selectedYear();
var selectedMake = this.selectedMake();
return Enumerable.From(makeModelList).Where(function(it) {
return it.year == selectedYear;
}).Where(function(it) {
return it.make == selectedMake;
}).Select(function(it) {
return it.model;
}).ToArray();
}, viewModel);
ko.applyBindings(viewModel);
数据在脚本块窗口中定义
var makeModelList = [
{
year: 1984,
make: 'Chevrolet',
model: 'Camaro'},
等等
试图让它尽可能简单，但不能完全弄清楚为什么选择是数据绑定，就像我试图模仿的例子一样。