Dropdown en cascada utilizando knockout.js

Question

Estoy intentando crear una serie desplegable de tres pasos. El ejemplo más fácil en el que podía pensar era construir un conjunto desplegable año/marca/modelo.

He intentado seguir el ejemplo y usar otro violín en (otra url fiddle que termina en jsfiddle.net/rniemeyer/V2gvT/), pero estoy teniendo problemas con el enlace de datos.

Mi violín tiene una lista estática de objetos de año/marca/modelo a usar, y la lista de años se une correctamente, pero nunca hace que las listas de modelos/marcas se vinculen con datos.

My Fiddle

simple de marcas

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

Guión

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

de datos se define en la ventana del bloque de script

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

etc.

Traté de hacerlo tan simple como pude, pero no puedo entender por qué los datos seleccionados son enlaces de datos como los ejemplos que he tratado de imitar.

Answer 1

Usted tiene innecesaria 'en esta línea (después de la palabra selectedMake):

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

simplemente retirarla.

fija violín - http://jsfiddle.net/Yrkbd/8/