This chapter demonstrates about the Knockout.js Custom Binding in which user is not limited to use the built-in bindings like click and value etc user can create his own bindings and follow are the concepts are covered in this chapter.

• Creating Custom Bindings

User is not restricted to utilizing the built-in bindings like click, value, etc — user can make your own ones. Which means to control how observables collaborate with DOM elements and give you a great deal of adaptability to encapsulate complex behaviors in a simple to reuse way. For instance, a user can make interactive components like grids, tablets, etc, in the form of custom bindings. binding Registration The user can also register the custom bindings by adding the sub-property of ko.bindingHandlers those are shown in below snippet. [code] 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. } } [/code]  update call back At whatever point the related noticeable changes, KO will call your overhaul callback, passing the accompanying Parameters For instance, a user may have been controlling an element visibility utilizing the visual binding, however now user needs to step further and animate the transition. the user need elements to slide into and out of presence as per the value of an observable. The user can do this by composing a custom restricting which calls jQuery'sslideUp/slideDown functions is as shown in below snippet. [code] ko.bindingHandlers.slideVisible = { update: function(element, valueAccessor, allBindingsAccessor) { // First get the latest data that we're bound to var value = valueAccessor(), allBindings = allBindingsAccessor(); // Next, whether or not the supplied model property is observable, get its current value var valueUnwrapped = ko.utils.unwrapObservable(value); // Grab some more data from another binding property var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified // Now manipulate the DOM element if (valueUnwrapped == true) $(element).slideDown(duration); // Make the element visible else $(element).slideUp(duration); // Make the element invisible } }; [/code] Now user can use the binding as shown below. [code] <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> [/code] init callback Knockout will call the init work once for every DOM element which user utilize the binding on. There are two fundamental uses for init:

• To set any initial state for the DOM element
• To register any event handlers so that, for instance, when the client clicks on or changes the DOM element, user can change the condition of the associate observable

KO will pass the very same arrangement of parameters that it goes to the update callback. In the previous example user may need slideVisible to set the component to be in a flash noticeable or invisible when the page first shows up (with any animated slide), so is the movement just runs when the client changes the model state. the user could do which is as follows. [code] 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 } }; [/code]

• KO will pass very same arrangement of parameters.
• The view model object is passed to ko.applyBindings.
• User is not restricted to utilizing the built-in bindings.