Knockout - arrayFirst example

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

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