ko.bindingHandlers.yourBindingName = {init: function(element, valueAccessor, allBindingsAccessor, viewModel) {// 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) {// This will be called once when the binding is first applied to an element,// and again whenever the associated observable changes value.// Update the DOM element based on the supplied values here.
    }
};

<div data-bind="yourBindingName: someValue"> </div>

ko.bindingHandlers.slideVisible = {update: function(element, valueAccessor, allBindingsAccessor) {// First get the latest data that we're bound tovar value = valueAccessor(), allBindings = allBindingsAccessor();        // Next, whether or not the supplied model property is observable, get its current valuevar valueUnwrapped = ko.utils.unwrapObservable(value);// Grab some more data from another binding propertyvar duration = allBindings.slideDuration || 400;// 400ms is default duration unless otherwise specified// Now manipulate the DOM elementif (valueUnwrapped == true)$(element).slideDown(duration); // Make the element visibleelse$(element).slideUp(duration);   // Make the element invisible
    }
};

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap"/> Gift wrap</label> <script type="text/javascript">var viewModel = {giftWrap: ko.observable(true)};ko.applyBindings(viewModel);
</script>

ko.bindingHandlers.slideVisible = {init: function(element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());// Get the current value of the current property we're bound to
        $(element).toggle(value);// jQuery will hide/show the element depending on whether "value" or true or false
    },update: function(element, valueAccessor, allBindingsAccessor) {// Leave as before
    }
};

ko.bindingHandlers.hasFocus = {init: function (element, valueAccessor) {$(element).focus(function () {var value = valueAccessor();value(true);});$(element).blur(function () {var value = valueAccessor();value(false);});},update: function (element, valueAccessor) {var value = valueAccessor();if (ko.utils.unwrapObservable(value))element.focus();elseelement.blur();}
};

<p>Name: <input data-bind="hasFocus: editingName"/></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button><script type="text/javascript">var viewModel = {editingName: ko.observable()};ko.applyBindings(viewModel);
</script>