Simple "flash" binding

http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<select data-bind="options: names, value: selectedName"></select>
    
<div>
    <h2>Name</h2>
    <div data-bind="text: selectedName, fade: selectedName" class="main"></div>
</div>

CSS

h2 { font-weight: bold; }
.main { background-color: #CCC; }

JavaScript

ko.bindingHandlers.fade= {
    update: function(element, valueAccessor) {
        $(element).hide().fadeIn(1500);
    }  
}
var viewModel = {
    names: ko.observableArray(['Bob', 'Jon']),
    selectedName: ko.observable('Bob')
};

ko.applyBindings(viewModel);