Knockout Options Text Binding

http://stackoverflow.com/questions/13903007/knockout-options-text-binding

by photo_tom

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/humanity/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<select data-bind="options: assemblies, optionsText: 'Name', value: selectedAssembly">
</select>
<br />
Name <input type="text" data-bind="value: selectedName " />
<br /><br /><br />
VM= <span data-bind="text: ko.toJSON($root)"></span>

JavaScript

var vm = {};
vm.assemblies = ko.mapping.fromJS([{
    "Id": 1,
    "Name": "Foo"},
{
    "Id": 2,
    "Name": "Bar"}]);

vm.selectedAssembly = ko.observable();
vm.selectedValue = ko.observable();
vm.selectedName = ko.computed({
    read: function() {
        var localVar = this.selectedAssembly(); // need for v8 compiler.
        if (localVar) {
            return localVar.Name();
        }
    },
    write: function(value) {
        var testValue = value.toLowerCase();
        var selArray = vm.assemblies();
        var l = selArray.length;
        for (var i = 0; i < l; i++) {
            var s = selArray[i].Name();
            if (s.toLowerCase() === testValue) {
                vm.selectedAssembly(selArray[i]);
            }
        }

    },
    owner: vm
});
//debugger;
ko.applyBindings(vm);