learn.knockoutjs.com - Creating custom bindings

http://learn.knockoutjs.com/#/?tutorial=custombindings

HTML

<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/App/coderunner.css">
<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/TutorialSpecific/custombindings.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/start/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<p data-bind="textAnimated: value"></p>
<button data-bind="click: toggleValue">Toggle value</button>

JavaScript

ko.bindingHandlers.textAnimated = {
    update: function(element, valueAccessor) {
        var value = valueAccessor();

        var valueUnwrapped = ko.utils.unwrapObservable(value);

        $(element).fadeOut('slow', function() {
            $(element).text(valueUnwrapped);       
            
            $(element).fadeIn('slow', function() {
                console.log('done');
            });
        });
    } 
};

function ViewModel() {
    var self = this;
    self.value = ko.observable('first value');
    
    self.toggleValue = function() {
        if(self.value() == 'first value') {
            self.value('second value');
        } else {
            self.value('first value');
        }
    }
}

ko.applyBindings(new ViewModel());