Shulou(Shulou.com)06/02 Report--

This article introduces how to create custom bindings in Knockout application development, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

Create a custom binding

You can create your own custom bindings, there is no need to use embedded bindings (such as click,value, etc.). You can encapsulate complex logic or behavior and customize bindings that are easy to use and reuse. For example, you can customize bindings like grid,tabset in a form form.

Important: the following documents apply only to Knockout 1.1.1 and later, and Knockout 1.1.0 and previous versions are different on registered API.

Register your binding

Add child attributes to ko.bindingHandlers to register your binding:

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. }}

You can then use it on any DOM element:

Note: you don't actually need to define both init and update callbacks, you can just define either of them.

Update callback

When the managed observable changes, KO will call your update callback function and pass the following parameters:

◆ element-the DOM element that uses this binding

The ◆ valueAccessor-JavaScript function, which uses valueAccessor () to get the current attribute value applied to the bound model.

The ◆ allBindingsAccessor-JavaScript function, which gets the attribute values of all model on this element through allBindingsAccessor ().

◆ viewModel-the view model parameter passed to ko.applyBindings, which is the data passed to the template if it is inside the template.

For example, you may want to control the visibility of an element through visible binding, but you want the element to be animated when it is hidden or displayed. Then you can customize your own binding to call jQuery's slideUp/slideDown function:

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}}

Then you can use your binding like this:

You have selected the option Gift wrap var viewModel = {giftWrap: ko.observable (true)}; ko.applyBindings (viewModel)

Of course, there may seem to be a lot of code, but once you create a custom binding, you can reuse it in many places.

Init callback

Knockout calls your init function when the DOM element uses a custom binding. Init has two important uses:

◆ sets the initial value for the DOM element

The ◆ register event handle, for example, when the user clicks or edits the DOM element, you can change the state of the relevant calendar value.

KO passes the same parameters as the update callback function.

Continuing with the above example, you can let slideVisible set the state of the element when the page is displayed * times (but do not use any animation), but just let the animation be executed later when it is changed. You can do this:

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}

This means that the initial value of giftWrap declares false (for example, giftWrap: ko.observable (false)), then lets the initial value hide the associated DIV, and then the element is displayed when the user clicks checkbox.

Update the calendar value after the DOM event

You've already figured out how to use update callbacks, and you can update the relevant DOM elements when the callback value changes. But what about other forms of events? For example, when the user has some action operation on a DOM element, you want to update the relevant roomable value.

You can use the init callback to register an event handle, which can change the relevant cancel value, such as

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 (); else element.blur ();}}

Now you can read or write the observable value through the hasFocus binding:

Name:

You're editing the name Edit name var viewModel = {editingName: ko.observable ()}; ko.applyBindings (viewModel); this is all about how to create custom bindings in Knockout application development. I hope the above can help you and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.