Knockout.js - Custom Bindings

by nitronic

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.js"></script>
<div class="overview">
    <h2>First name</h2>
    <span data-bind="text: firstName, fade: firstName"></span>
    <h2>Last name</h2>
    <span data-bind="text: lastName, fade: lastName"></span>
</div>

<div class="data">
    <h2>First name</h2>
    <input data-bind="value: firstName" /><br/>
    <h2>Last name</h2>
    <input data-bind="value: lastName" /><br/>
</div>

CSS

h2 { 
    font-weight: bold; 
    font-size: 120%;
}

.overview { 
    background-color: #eeeeee; 
    padding: 5px;
    border: 1px solid #000;
}

.data {
    margin-top: 20px;
    padding: 5px;
}

JavaScript

ko.bindingHandlers.fade= {
    update: function(element, valueAccessor) {
        $(element).hide().fadeIn(1000);
    }  
};
    
var viewModel = {
    firstName: ko.observable("Norbert"),
    lastName: ko.observable("Eder")
};

ko.applyBindings(viewModel);