Demonstrate optionsAfterRender

by Shrikrishna Gupta

HTML

<script src="http://bestware.us/knockout/2.3.0/knockout-latest.js"></script>
<select size=3 data-bind="
    options: myItems, 
    optionsValue: 'id',
    optionsText: 'name',
    optionsAfterRender: setOptionStyle,
    value: selectedValue">
</select>
<div>Value: <span data-bind="text: selectedValue"></span></div>
<ol data-bind="foreach: myItems">
    <li><label><input type="checkbox" data-bind="checked: disable"> <span data-bind="text: name"></span></label></li>
</ol>

JavaScript

var myItems = [
    { name: 'Item 1', id: 1, disable: ko.observable(true), color: 'red', title: 'This is item 1.'},
    { name: 'Item 2', id: 2, disable: ko.observable(true), color: 'green', title: 'This is item 2.'},
    { name: 'Item 3', id: 3, disable: ko.observable(true), title: 'This is item 3.'},
    { name: 'Item 4', id: 4, disable: ko.observable(true), color: 'orange'}
];
var vm = {
    myItems: myItems,
    selectedValue: ko.observable(),
    setOptionStyle: function(option, item) {
        if (item.color)
            option.style.color = item.color;
        if (item.title)
            option.title = item.title;
        ko.applyBindingsToNode(option, {disable: item.disable}, item);        
    }
};
ko.applyBindings(vm);