KnockoutJs Watermark bindingHandler

HTML

<script src="http://www.aegema.com/jsfiddle/knockout-1.2.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<fieldset>
    <p>
        <label>Email</label>
        <input type="text" data-bind="value: emailAddress, watermark: 'Your email address'" />
    </p>
    <p>
        <label>First name</label>
        <input type="text"data-bind="value: firstName, watermark: 'Your first name'" />
    </p>
    <p>
        <label>Last name</label>
        <input type="text" data-bind="value: lastName, watermark: 'Your last name'" />
    </p>
</fieldset>

<div id="debug" style="clear: both">
    <hr />
    <h2>Debug</h2>
    <div data-bind="text: ko.toJSON(viewModel)"></div>
</div>

JavaScript

ko.bindingHandlers.watermark = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var defaultWatermark = ko.utils.unwrapObservable(value);
        var valueObservable = allBindings.value;
        element.value = defaultWatermark;
        $(element).focus(
            function () {
                if (element.value === defaultWatermark) {
                    valueObservable('');
                }
            }).blur(function () {
                if (element.value === '') {
                    valueObservable(defaultWatermark);
                }
            });
    }
};

viewModel = function () {
    emailAddress= ko.observable('Your email address');
    firstName= ko.observable('Your first name');
    lastName= ko.observable('Your last name');

    return {
        emailAddress: emailAddress,
        firstName: firstName,
        lastName: lastName
    };
} ();

ko.applyBindings(viewModel);