Kaskadowe rozwijanie przy użyciu knockout.js

Question

Próbuję zbudować rozwijaną serię z trzema krokami. Najłatwiejszym przykładem, jaki mogłem wymyślić, było zbudowanie zestawu rozwijanego rok/marka/model.

Próbowałem podążać za przykładem i używać innego skrzypiec w (inny adres url fltrl kończący się jsfiddle.net/rniemeyer/V2gvT/), ale mam problemy z powiązaniem danych.

Moje skrzypce ma statyczną listę obiektów roku/marki/modelu do użycia, a lista lat wiąże się poprawnie, ale nigdy nie uzyskuje listy danych make/model dla databind.

My Fiddle

Proste Markup

<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> 

Script

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); 

danych jest zdefiniowana w oknie bloku skryptu

var makeModelList = [ 
{ 
    year: 1984, 
    make: 'Chevrolet', 
    model: 'Camaro'}, 

itp

Próbowałem uczynić go tak prostym, jak tylko mogłem, ale nie mogłem w pełni zrozumieć, dlaczego selekcje wiążą się z danymi podobnie do przykładów, które próbowałem naśladować.

Answer 1

Masz niepotrzebny "w tej linii (po słowo selectedMake):

<select id="ddlMake" data-bind="options: makes, value: selectedMake'"></select> 

prostu go usunąć.

naprawiono skrzypce - http://jsfiddle.net/Yrkbd/8/