Knockout - readonly model binding from selected item in dropdown

http://stackoverflow.com/questions/9769955/knockout-readonly-model-binding-from-selected-item-in-dropdown

by RobertSudwarts

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<h1>Name <span data-bind="text: name"></span></h1>
<h2>State <span data-bind="text: state"></span></h2>
<ul data-bind="foreach: qualities">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

$(function() {
    var fakeGetJSON = function () {
        return {"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"};
    };
    
    var viewModel = function (config) {
        var self = this;
        
        // initial call to mapping to create the object properties
        ko.mapping.fromJS(config, {}, self);
        
        this.get_updates = function () {
            ko.mapping.fromJS(fakeGetJSON(), {}, self);
        };            
    };
    
    // create viewmodel with default structure so the properties are created by
    // the mapping plugin
    var vm = new viewModel({ state: "M", qualities: [], name: "Foo" });

    function poll()
    {
        setTimeout(function(){
            vm.get_updates();
            poll();
        }, 3000)
    }
            
    // only one call to applybindings        
    ko.applyBindings(vm);
    poll();
});