Knockout's top features continued

Utilities

Knockout provides a number of tools you can use in your development, and you can find them in the Ko.utils namespace, and my favorite tools are as follows:

Extend: This method merges two objects together, and after this method is invoked, all the properties of the second object are merged into the first object.

Unwrapobservable: This method takes a property as an argument and then returns its value. Such as Knockout's observable attribute, or a simple attribute. This function is useful when you want the actual value of the object to be obtained at run time.

All array tools: Knockout provides a number of tools for manipulating data, allowing you to filter, map, or delete items. I often attach these methods to the KO.OBSERVABLEARRAY.FN at the beginning of the project.

The following code shows how to use the method.

Extend Usage  
var a = {val:1},  
B = {Val:2};  
      
Ko.utils.extend (A, b);  
Console.log (A.val); Console:2  
      
//unwrapobservable usage  
var c = ko.observable (), d = n;  
Console.log (Ko.utils.unwrapObservable (c)); console:99  
Console.log (ko.utils.unwrapObservable (d));//console:98  
      
//array "map" utility function usage< C10/>var arr = [m];  
var mapped = Ko.utils.arrayMap (arr, function (item) {return  
    item +;  
})  
      
Console.log (arr); Console: [150, 151]

Data-bind statements

We've been looking at knockout's script library, and in fact, knockout was designed to simply bind JavaScript objects to HTML. The API uses the Data-bind syntax that is compatible with HTML5. In our previous example, you can see that you can simply bind the attributes of an HTML element to a ViewModel property. The Data-bind syntax allows you to use comma-delimited binding definitions, and the following example demonstrates how to use them.

<span data-bind= "Text:mytext" ></span>  
<div data-bind= "visible:isvisible, With:someprop" > </div>  
<input data-bind= "Value:someval,  
    css: {  
        ' error ':!someval.isvalid (),  
        ' success ': Someval.isvalid ()  
    } "/>

Applying bindings

Applybindings is the starting point for knockout to start all work. Most of the examples demonstrate how to use a ViewModel as a parameter. But you can specify a DOM object with the second argument, and knockout will only bind to this DOM node and its child nodes.

Most applications have only one ViewModel, and only one ViewModel parameter is passed when the applybinding is invoked. However, I have created many complex applications, using multiple ViewModel objects in one page, using multiple ViewModel to handle hints, settings, and information for the current user, among others. In these cases, you can gain a performance advantage by limiting the number of nodes that the knockout binds to. If you only need to update part of the page, do not bind to the entire page through knockout.

Binding handlers

I have mentioned that knockout provides a lot of extension points. There are some more convenient than knockout Binding handler. Although the binding handler is realized through Data-bind syntax. Knockout also allows us to customize the binding of the processor, so we can implement, or rewrite, our custom functionality.

In MVVM-style development, we have two types of bindings: one-way and two-way binding. A one-way binding is a simple information read that reads the data from the ViewModel and binds it to the DOM. You can imagine that bidirectional data binding is on a one-way basis, returning the update of the DOM object to the ViewModel property. Knockout allows us to create all types of bindings, the following code demonstrates the use of basic processors.

ko.bindinghandlers[' MyHandler '] = {  
    init:function (element, Valueaccessor, Allbindingsaccessor,  ViewModel, BindingContext) {  
    },  
      
    update:function (element, Valueaccessor, Allbindingsaccessor,    ViewModel, BindingContext) {  
      
    }  
};

As you can see, we have provided two hooks to implement our logic. Init and update functions. The arguments for these functions are as follows:

Element: defining elements of Data-bind

Valueaccessor: Returns the ViewModel binding property worthy function. If you bind to the observable property, then return to this observalbe, in our processing logic, we need to do this observable upwarp processing.

Allbindingaccessor: Similar to Valueaccessor, but it returns an object that contains all the bound and bound values.

ViewModel: A view model or root object passed to Applybindings

BindingContext: A specialized special object that contains specific information that represents the context of the current binding environment. There is a $data attribute in the binding context that represents the current binding, which is often the same as ViewModel. There are also $parent properties and $parents properties that represent the parent node of the binding element. These properties are usually used when using with.

Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/