Simple "flash" binding

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

by rniemeyer

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://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<div class="main" data-bind="flash: name">
    <h2>Name</h2>
    <span data-bind="text: name"></span>
</div>

<hr />

<input data-bind="value: name" />

CSS

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

JavaScript

ko.bindingHandlers.flash= {
    update: function(element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor());  //unwrap to get subscription
        $(element).hide().fadeIn(500);
    }  
}
var viewModel = {
    name: ko.observable("Bob")
};

ko.applyBindings(viewModel);