Cascading Dropdown mit knockout.js

Question

Ich versuche, eine dreistufige Drop-Down-Serie zu bauen. Das einfachste Beispiel, an das ich denken konnte, war das Erstellen eines Dropdown-Sets für Jahr/Marke/Modell.

Ich habe versucht, das Beispiel bei und mit einer anderen Geige bei (eine andere Geige URL endet mit jsfiddle.net/rniemeyer/V2gvT/), aber habe Probleme mit der Datenbindung.

Meine Geige hat eine statische Liste von Jahr/Marke/Modell-Objekten zu verwenden, und die Jahr-Liste bindet ordnungsgemäß, aber nie die Make/Model-Listen zu Databind.

My Fiddle

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

Die Daten werden im Skriptblock Fenster definiert

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

usw.

Ich habe versucht, es so einfach wie möglich zu machen, kann aber nicht genau herausfinden, warum die Auswahldaten wie die Beispiele sind, die ich nachzuahmen versucht habe.

Answer 1

Sie haben 'unnötig in dieser Zeile (nach dem Wort selectedMake):

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

es einfach entfernen.

feste Geige - http://jsfiddle.net/Yrkbd/8/