"Knockout" v. Create a custom binding

Overview

You can also create custom bindings in addition to the built-in binding types (such as value, text, and so on) listed in the previous article.

Sign up for your binding handler

Ko.bindingHandlers.yourBindingName ={init:function(element, Valueaccessor, allbindings, ViewModel, BindingContext) {//This would be called when the binding was first applied to an element        //Set up any initial state, event handlers, etc. here}, Update:function(element, Valueaccessor, allbindings, ViewModel, BindingContext) {//This would be called once when the binding was first applied to an element,        //and again whenever any observables/computeds that is accessed change        //Update The DOM element based on the supplied values here.    }};

You can then use the custom bindings on any DOM element:

<data-bind= "Yourbindingname:somevalue"></Div  >

Note: You do not have to provide both INIT and update callback in your handler to provide either.

Update callback

As the name implies, KO will automatically call your update callback when your monitoring properties observable updated.

It has the following parameters:

element: Use this bound DOM element;

valueAccessor: by callingvalueAccessor()可以获得当前绑定的model属性值，调用ko.unwrap(valueAccessor())能够更方便的获取observable的值和普通值；

allBindings: All property values that are bound to the model on this DOM element, such as calling Callbindings.get (' name '), return the Name property value of the binding (there is no return undefined), or call Allbindings.has (' Name ') to determine whether the name is bound to the current DOM;

viewModel: Deprecated in knockout.3x, available bindingcontext. $data or BindingContext. $rawData to obtain the current ViewModel;

bindingContext: Binding context, callablebindingContext.$data、 bindingContext.$parent, bindingContext.$parents等获取数据；

Next, you might want to use the visible binding to control the visibility of the element and animate it, so you can create your own custom bindings:

Ko.bindingHandlers.slideVisible ={update:function(element, Valueaccessor, allbindings) {//First get the latest data that we ' re bound to        varValue =valueaccessor (); //Next, whether or not the supplied model was observable, get its current value        varvalueunwrapped =Ko.unwrap (value); //Grab Some more data from the another binding property        varDuration = Allbindings.get (' 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    }};

Then you can use this custom binding like this:

<DivData-bind= "Slidevisible:giftwrap, slideduration:600">You have selected the option</Div><label><inputtype= "checkbox"Data-bind= "Checked:giftwrap" />Gift Wrap</label> <Scripttype= "Text/javascript">    varViewModel={giftWrap:ko.observable (true)    }; Ko.applybindings (ViewModel);</Script>

Init callback

Ko will call your init function for each DOM element that uses bindings, and it has two main uses:

(1) Set the initialization state for DOM elements;

(2) Register some event handlers, such as: when the user clicks or modifies the DOM element, you can change the state of the monitoring attribute;

Ko will use exactly the same set of parameters as the update callback.

Continuing with the previous example, you might want slidevisible to set the visibility state of the element at the first display of the page (without any animation effects), and the animation effect is performed at a later time, and you can do so in the following way:

 ko.bindingHandlers.slideVisible = {init:    var< /span> value = Ko.unwrap (Valueaccessor ()); //  Get the current value of the "we ' re bound to  $ (element). Toggl E (value); //   jQuery would hide/show the element depending on whether "value" or True or false   function    Leave as Before   

Giftwrap is initialized to be defined as False (ko.observable (false)), the associated Div is hidden when initialized, and then the div is displayed when the user taps the checkbox.

Now that you know how to use the update callback, you can update the DOM element when the observable value changes. We can now do this in another way, such as when a user has an action operation that can also cause your observable value to be updated, for example:

Ko.bindingHandlers.hasFocus ={init:function(element, Valueaccessor) {$ (Element). Focus (function() {            varValue =valueaccessor (); Value (true);        }); $ (Element). blur (function() {            varValue =valueaccessor (); Value (false);    }); }, Update:function(element, valueaccessor) {varValue =valueaccessor (); if(Ko.unwrap (value)) Element.focus (); ElseElement.blur (); }};

Now you can read and write your observable value through the "focusedness" binding of the element.

<P>Name:<inputData-bind= "Hasfocus:editingname" /></P> <!--Showing that we can both read and write the focus state -<DivData-bind= "Visible:editingname">You ' re editing the name</Div><ButtonData-bind= "Enable:!editingname (), click:function () {Editingname (True)}">Edit Name</Button> <Scripttype= "Text/javascript">    varViewModel={editingName:ko.observable ()}; Ko.applybindings (ViewModel);</Script>

"Knockout" v. Create a custom binding