testKnoutjs_001

by spacexplorer

HTML

<script src="http://knockoutjs.com/examples/resources/sampleProductCategories.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<select data-bind='options: sampleProductCategoriesXXX, optionsText: "name", optionsCaption: "Select...", value: category'> </select>


<span data-bind="with: category">
    <span data-bind='text: name'>xxxx</span>
    <select data-bind='options: streets, optionsText: name, optionsCaption: "Select...", value: subcategory'> </select>
</span>    



<div width="100%" data-bind="with: category">
<h4>result:</h4>
<span data-bind='text: name'>xxxx</span>
<span data-bind='text: streets[0].name'>xxxx</span>
<span data-bind='text: streets.length()'>xxxx</span>
</div>

JavaScript

var citiesList = ([
        {id:1, name:"Alpha", streets:[
            {id:2, name:"AlphaStreet01"},
            {id:13, name:"AlphaStreet02"},
            {id:3, name:"AlphaStreet03"}
            ]},
        {id:5, name:"Bravo", streets:[
            {id:4, name:"BravoStreet01"},
            {id:15, name:"BravoStreet02"},
            {id:14, name:"BravoStreet03"},
            {id:7, name:"BravoStreet05"}
            ]},
        {id:12, name:"Charlie", streets:[
            {id:10, name:"BravoStreet01"},
            {id:9, name:"BravoStreet02"},
            {id:16, name:"BravoStreet03"},
            {id:8, name:"BravoStreet05"},
            {id:30, name:"BravoStreet05"}
            ]},
        {id:6, name:"Delta", streets:[
            {id:11, name:"BravoStreet01"},
            {id:17, name:"BravoStreet02"},
            {id:23, name:"BravoStreet03"},
            {id:22, name:"BravoStreet05"}
            ]},
        {id:23, name:"Echo", streets:[
            {id:18, name:"BravoStreet01"},
            {id:20, name:"BravoStreet02"},
            {id:19, name:"BravoStreet03"},
            {id:21, name:"BravoStreet05"}
            ]}
        ]);

function ProductsViewModel() {
    var self = this;
    self.sampleProductCategoriesXXX = ko.observableArray(citiesList);
    
    self.sampleProductCategories = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);
    
    self.category=  ko.observable();
  self.subcategory =  ko.observable();
    
    
    
    
}

ko.applyBindings(new ProductsViewModel());