Cascading dropouts using knockout.js

Question

I am trying to create a three-step dropdown series. The simplest example I could think of was to cut out the set year / make / model.

I tried to follow the example and use a different script (another script ending with jsfiddle.net/rniemeyer/V2gvT/), but I have problems with data binding.

My scripts have a static list of year / make / model objects, and the year list is bound correctly, but never gets make / model lists for data binding.

My violin

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

Data defined in script window

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

and etc.

I tried to make everything as simple as possible, but I can’t understand why the samples are attached to the data, like the examples I tried to simulate.

Answer 1

You do not need this line (after the word selectedMake):

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

just delete it.

fixed script - http://jsfiddle.net/Yrkbd/8/