私は3ステップのドロップダウンシリーズを構築しようとしています。私が考えることができる最も簡単な例は、年/メーカー/モデルのドロップダウンセットを作成することでした。
の例に従って、別のフィドル（jsfiddle.net/rniemeyer/V2gvT/で終わる別のフィドルURL）を使用してみましたが、データバインディングに問題があります。
私のフィドルには、使用する年/製造/モデルオブジェクトの静的リストがあり、年リストは適切にバインドされますが、製造/モデルリストをデータバインドに取得することはありません。
シンプルなマークアップ
<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'},
等
できるだけシンプルにしようとしましたが、模倣しようとした例のように、selectがデータバインディングである理由を完全に理解することはできません。