Simple "flash" binding

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

by alexdresko

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" class="main"></div>
</div>
<div style="display: none;" data-bind="fadd: display, template: { foreach: names, afterAdd: afterAdd, afterRender: afterRender }"> <span data-bind="text: $data"></span>

</div>
<button data-bind="click: adder">Go</button>

CSS

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

JavaScript

ko.bindingHandlers.fadd = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();

        if (ko.utils.unwrapObservable(value)) {
             $(element).fadeIn(); 
        }

    }
};

var viewModel = {
    names: ko.observableArray(['Bob', 'Jon']),
    selectedName: ko.observable('Bob'),
    renderedCount: 0,
    display: ko.observable(false)
    
};

viewModel.adder = function () {
    viewModel.names.push("asdf");
};

viewModel.afterAdd = function (element) {
        $(element).hide();
     $(element).fadeIn(700);
};
viewModel.afterRender = function (element, data) {
    viewModel.renderedCount++;
    if (viewModel.renderedCount === viewModel.names().length) {
        viewModel.display(true);  
    }
};

ko.applyBindings(viewModel);