Reputation: 2626
Have a wierd issue where everything works fine until i specify optionsValue. You could see my problem here
works http://jsfiddle.net/abritez/ttyhE/2/
doesn't work http://jsfiddle.net/abritez/ttyhE/4/
All you need to do is try running it with the select that that is commented, and you will see the issue when trying to cascade.
JSON data
var productCategories = [{
"name": "Comapany A",
"abbr": "cA",
"disiplineList": [{
"name": "Math",
"abbr": "math",
"courseList": [{
"name": "Algebra",
"abbr": "alg"
}]
}, {
"name": "English",
"abbr": "eng",
"courseList": [{
"name": "Phonics",
"abbr": "phon"
}]
}]
}, {
"name": "Company B",
"abbr": "cB",
"disiplineList": [{
"name": "Gym",
"abbr": "gym",
"courseList": [{
"name": "Kick Ball",
"abbr": "kb"
}]
}]
}];
HTML code
<table width='100%'>
<tbody data-bind='foreach: lines'>
<tr>
<td>
<select data-bind='options: productCategories, optionsText: "name", optionsCaption: "Select...", value: company'> </select>
</td>
</tr>
<tr>
<td data-bind="with: company">
<select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
</td>
</tr>
<tr>
<td data-bind="with: disipline">
<select data-bind='options: courseList, optionsText: "name", value: product'></select>
</td>
</tr>
</tbody>
</table>
Java Script (knockoutjs)
function ProductLine(){
self.company = ko.observable();
self.disipline = ko.observable();
self.product = ko.observable();
// Whenever the category changes, reset the product selection
self.company.subscribe(function() {
self.disipline(undefined);
self.product(undefined);
});
}
function Product(){
self.lines = ko.observableArray([new ProductLine()]); // Put one line in by default
}
ko.applyBindings(new Product());
Upvotes: 0
Views: 1833
Reputation: 1081
Still i don't get it.
But if you want to show name and abbr u can:
<select data-bind='options: productCategories,
optionsText: function(item) {return item.name + " - " + item.abbr}, optionsCaption: "Select...", value: company'> </select>
if u want to display your abbr you can:
<td data-bind="with: company">
<select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
<span data-bind="text: abbr"/> <-- like this
</td>
Upvotes: 1