bind select to json object

https://groups.google.com/d/topic/knockoutjs/rbXVn8TH6og/discussion

by Ruchika Sharma

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div id="a">
    <select data-bind="options: choices, optionsText: 'desc', value: selectedChoice"></select>
    <div data-bind="text: selectedChoice() ? selectedChoice().desc : 'unknown'"></div>
</div>
<hr/>
<div id="b">
    <select data-bind="options: choices, optionsText: 'desc', optionsValue: 'id', value: selectedChoiceId"></select>
    <div data-bind="text: selectedChoice() ? selectedChoice().desc : 'unknown'"></div>
</div>

JavaScript

var viewModelA = {
    choices: [{
        id: 1,
        desc: "one"
    }, {
        id: 2,
        desc: "two"
    }, {
        id: 3,
        desc: "three"
    }],
    selectedChoice: ko.observable()
};

ko.applyBindings(viewModelA, document.getElementById("a"));

var viewModelB = {
    choices: [{
        id: 1,
        desc: "one"
    }, {
        id: 2,
        desc: "two"
    }, {
        id: 3,
        desc: "three"
    }],
    selectedChoiceId: ko.observable()
};

viewModelB.selectedChoice = ko.dependentObservable(function () {
    var id = parseInt(this.selectedChoiceId());
    return ko.utils.arrayFirst(viewModelB.choices, function (choice) {
        return choice.id === id;
    });
}, viewModelB);

ko.applyBindings(viewModelB, document.getElementById("b"));