<分区>
我正在尝试构建一个三步下拉系列。我能想到的最简单的例子是构建年份/品牌/型号下拉列表集。
我尝试按照 at 的示例并使用另一个 fiddle at(另一个以 jsfiddle.net/rniemeyer/V2gvT/结尾的 fiddle url)，但我在数据绑定(bind)方面遇到了问题。
我的 fiddle 有一个要使用的年份/品牌/型号对象的静态列表，并且年份列表可以正确绑定(bind)，但永远不会将品牌/型号列表进行数据绑定(bind)。
简单标记
<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);
数据在脚本 block 窗口中定义
var makeModelList = [
{
year: 1984,
make: 'Chevrolet',
model: 'Camaro'},
等等
尽我所能使其尽可能简单，但无法完全弄清楚为什么选择像我试图模仿的示例那样进行数据绑定(bind)。