"Share" the right way to open the WeX5 (3)--binding mechanism

Today tidy up the binding mechanism of WeX5.

The problem of being native
Suppose we make an order system, we need to display the unit price, then we can calculate the total price according to the input quantity and show it. Using native code is also easy to implement, with the effect of:

The code is as follows:

<!--HTML Code -Price :<spanID= "Price"></span><BR/>Account :<inputtype= "text"ID= "Account"value=""placeholder= "Please enter quantity" /><BR/>sum:<spanID= "Sum"></span>//js Codevar pricenode = document.getElementById (' price '), Accountnode = document.getElementById (' account '), Sumnode = document.getElementById (' Sum '), Price = 100,account = 11,sum = Price * account;//initialized. Pricenode.innertext = Price;accountnode.value = Account;sumnode.textcontent = sum;//monitoring The user input of the view layer is Accountnode.addeventlistener (' KeyDown ', function (e) {window.settimeout ()} (function () {account = Accountnode.value;sum = Price * Account;sumnode.textcontent = sum;},10);});

Yes, it's pretty simple! Oh, by the way, we're showing 50 items at a time, and there are 10 types of such displays, as well as a variety of promotions to buy 5 boxes of Okamoto to send a fried dough stick ...

So, you know the problem with native implementations:

• With the increase of UI and data interaction, the code volume grows rapidly and is difficult to maintain
• Based on DOM queries, ID or class naming is difficult to manage
• Code coupling is high and difficult to reuse

The solution of WeX5
In order to solve these problems, WeX5 introduced the KNOCKOUTJS (hereinafter referred to as KO) this MVVM library.
Why choose Ko rather than angular a more comprehensive framework? Angular is good, but such a chatty frame, without enough actual combat test, a lot of pits will not be exposed. Ko is a lightweight MVVM library that focuses on implementing data-to-view bindings, which in itself do not provide the functionality of UI classes and routing, so it is very simple and stable. At the same time, because he has been out for some years, now is a more mature framework. Therefore, when doing some mobile page development, Ko is undoubtedly a better choice. In addition, about the MVVM of the small tomato is not much to say, a picture to cover:

Ko is built on top of 3 core features (website introduction):
1. Observable objects and dependency tracking (observables and dependency tracking): Use observable objects to establish a chain of implicit relationships between model data for data transformation and binding.
2. Declarative binding (declarative bindings): Easily bind model data to DOM elements with simple, easy-to-read syntax.
3. Template (Templating): Built-in template engine, quickly write complex UI presentation for your model data.
Here is a brief talk about KO's major concepts:
Observable objects
Use Ko to rewrite the above example (custom price, which is one of my childhood wishes):

The code is this:

<!--HTML Code -<DivID= "One">Price :<inputtype= "text"Data-bind= "Value:price"placeholder= "Please enter unit price" /><BR/>Account :<inputtype= "text"Data-bind= "Value:account"placeholder= "Please enter Number" /><BR/>sum:<spanData-bind= "Text:sum"></span></Div>//js Codevar ViewModel = function (p, a) {//Set as observable and with parameter p, a initialize this.price = Ko.observable (p); this.account = Ko.observa BLE (a);//When the KO function is called, this is the Ko,ko.price () error when executing ko.purecomputed internal code. This.sum = ko.purecomputed (function () {///Because the observable object is a function object, use price () to read the current value. Set the value using Price (NewValue), which supports chained notation: This.price (3) return This.price () * This.account ();}, this); var vm = new ViewModel (135, 10);//Apply the binding, the binding begins to take effect ko.applybindings (VM);

1) Look at the HTML code First:
You can see that a key-value pair such as Data-bind = "Xx:oo" is added to each label. This is the binding grammar of Ko, what does xxoo represent? (Xxoo?) The little tomato is still a child ... You can see from the example that XX is a label attribute, which can be a tag attribute such as text, value, class, checked, and so on, which can actually be a DOM event such as click, Focus, load, and so on. OO looks like a variable, not actually a variable, but rather a function object that executes the function (with a ()) to get the corresponding binding value. By Xxoo, you can bind the attributes or events of an element with the function object in JS (Xxoo will be responsible for each other?), which is the declarative binding of KO. The definition of a binding is actually an observer pattern, but this is a two-way binding, where publishers and subscribers subscribe to each other's messages, which is the two-way binding of MVVM. The result of Ko bidirectional binding is that one change can automatically update the other, that is, the data and the presentation layer are tightly bound together by ViewModel. The effect of binding is similar to:

2) and look at the JS code:
You can see that a ViewModel object is defined in JS, and the object is manipulated in the HTML bound oo. There are two main operations: Ko.observable () and ko.purecomputed ().

• ko.observable (p): See the name, this is the way to set the observable object, the passed parameter p is the initialized value, here the argument can be the basic data type, or it can be a JSON object. Being set as an observable means that the system will always observe this value. Either p in the ViewModel or P in the bound object will cause a refresh event, updating all the places where this value is used to the latest state. It is obvious that observable objects are more consumable, so do not set as observable for values that do not require dynamic changes (such as prices), or you need to put them in viewmodel for centralized initialization.
• Note: The observable object returned by Ko.observable (p) is a function object, so the reading of observable objects requires the use of price (), and similarly, the way to set the observable object to use Price (NewValue). More intimate is that when set up to support the chain style: Viewmodel.price. Account (10).
• ko.purecomputed () is the so-called dependency tracking, here is the unit price * Quantity equals the total price, note here can not directly use This.sum = This.price () * This.account (); To specify SUM, This notation does not dynamically refresh the bound object, but it changes the sum variable dynamically, but other actions are required to flush the bound object. Therefore, the calculation-related binding values are set using KO's calculation function. Of course, the return is also a function object. In addition, KO has a computed function, which can also be set, but it is recommended to use pure to improve performance.
• Note the wording here: ko.purecomputed (FN, this), that is, to bind FN to the ViewModel execution environment, in fact, is the call/apply in JS. Because this is a KO object in the execution of the KO intrinsic function, it is required to pass the above notation in order to get the ViewModel object. Of course, you can also save the ViewModel object with that outside of the KO function, and then use that within the KO function to invoke the ViewModel object. Like this:

var that = This;this.sum = ko.purecomputed (function () {return That.price () * That.account ();});

Once you have defined the ViewModel constructor, you instantiate a ViewModel object, and then use the Ko.applybindings () method to make the binding effective, and do not miss the step.

Simple mode using KO's page:

<!-- HTML Code  - <  data-bind= "Text:bindtext"></span>//JS Codevar ViewModel = {bindtext:ko.observable (' InitValue ')};ko.applybindings (ViewModel);

Summed up is: HTML using data-bind= "Xx:oo" declaration binding, JS set up ViewModel and set the observable object, finally apply the binding.

Observable array of objects
Then look at the use of the observable object array, in KO can not be like JS as the array and variables mixed, for the array object will be used Ko.observablearray ([...,...]) In this form, as well, the array element can also be a basic type or a JSON object. The array of observable objects in Ko has a series of array manipulation methods, such as slice (), sort (), push (), the effect is the same as the native JS array operation method, only the changes made by the Ko method will notify subscribers to refresh the interface, but the JS method will not refresh the interface. Here is a simple example:

<!-- HTML Code  - <  data-bind= "Options:list"></Select>//JS Codevar VM = {//List:ko.observableArray () List:ko.observableArray ([' Luffy ', ' Zoro ', ' Sanji '])};ko.applybindings (VM);

Key point: KO monitors the state of the array, not the state of the element itself. This means that when the array state changes (adding or subtracting elements), the KO event is triggered to cause a flush of the bound object, but changes in the inner elements of the array (e.g., value changes) are not monitored to trigger the KO event. For example:

  
     using native methods in the console to change Luffy dynamically to Lucy will not refresh the UI page, while array manipulation using KO changes the array will immediately refresh the page, it is worth noting that at the time of the refresh, The previous changes will also be refreshed (Luffy > Lucy). In other words, JS memory variables are changed, but there is a lack of a refreshing dom action. As you can see here, the way to read an array is vm.list () [0], because list is also a function object, and executing the return value is the list content we want. Similarly, you can reset the array of observable objects in such a way that vm.list (["Sister", "sister", "sister"]), and refresh the UI immediately.
If changes to the array elements need to be dynamically reflected to the UI, the array elements need to be set as observable, and the array element values can be changed using Ko's method. Note that is the method of using KO list () [0] ("Lucy")! The

     operations can observe an array of objects in two categories, one with the same name as the native JS array method: Pop, push, shift, unshift, reverse, sort, splice, This part is the same as the use and effect of the JS native method, and we will not repeat it.
Other methods are not in JS, mainly have the following:

• Remove (Someitem)-Removes all element items with values equal to Someitem and returns them as an array, meaning that you cannot delete the first item directly list.remove (0), but instead use the List.remove (list () [0] ) This form to remove. All in all, the parameter passed in must be the value of the element item, either in the form of list () [0] or directly into a string of values (such as "Luffy").
• Remove (function (item) {return Item.age < 18;})--Removes all element items with an age attribute less than 18 and returns them as an array, which is no different from the usual array higher order functions. Item is passed as a parameter to the higher-order function, and when the array is traversed, the item is deleted when the return value of the higher-order function is true, otherwise it goes to the next item.
• RemoveAll ([' Chad ', undefined])--Removes all element items that have the same value as ' Chad ' or 123 or undefined and returns them as an array.
• RemoveAll ()--Deletes all items and returns as an array.

tip : When working with observable objects, if the number of objects is large and the interaction is frequent, the performance can be very much consumed when each change is immediately refreshed, using the extended myobservablearray.extend ({ratelimit:1000 }) To set the deferred refresh. For example, when inserting elements into an observable array, you can set a cycle time of 1000ms, and let all operations within 1000ms be concentrated into a single flush, avoiding the performance deterioration caused by the frequent manipulation of the DOM.

How to use KO in WeX5?
WeX5 as a leader in the HTML5 development tool world, and without the integration of the excellent KO Framework, the method used is very simple: Specify the bind attribute of the component in the visual editor and then manipulate the corresponding bound value in the JS code.
First specify in the visual editor:

This method in the Hello World also has a brief introduction, unfamiliar classmate can go to see Kazakhstan first. With the visual editor we can bind the corresponding property or event, here we bind a string "Hello World" for Bind-ref, and other properties and events will be described in the next article. After binding we open the Code Editor and found that there is no 1 in the same binding code. Where did the binding code go? Please open the HTML source code:

You can see the "Bind-ref= ' Hello World" appears in the code, is it similar to the one mentioned above Data-bind? Here WeX5 add the properties that each component can bind to the visual editor, so that you don't have to remember what properties a component can tie, and where the mouse is tied! Of course, the binding string doesn't make much sense, and we usually bind a variable (actually a function object that returns a value of the desired variable). For example:

Here the text is bound to mytext, this form of binding is directly tied to the model object, so you can in the JS source model under the operation of this MyText object.
1 define (function (require) {2 var $ = require ("jquery"), 3 var justep = require ("$UI/system/lib/justep"); 4 5 var Model = function () {6 this.callparent (); 7 This.mytext = Justep. Bind.observable ("bind!"); 8}; 9 Model.prototype.button2Click = function (event) {This.myText.set ("changed"); 11}; return Model; 13}); 14
You can see that the KO component has been encapsulated into the Justep bind object, and the operation of the observable object is a bit different from the KO, where the set/get is used to set and get the values of the observable objects respectively. The use of other methods, such as compute, is consistent with that of KO.
Summary
This article briefly introduces the origins of data binding in WEX5 and the excellent framework behind it (Knockoutjs), highlighting the most important concepts in KO: observable objects (arrays), and then simply demonstrates how to use binding mechanisms in WeX5 and the differences between bindings in WeX5 and Ko.
A brief introduction to observable objects is here, and the next article will describe the usage of various bindings! The code word is not easy, at the same point likes ha ~
References:
1. Ko's official tutorial: http://knockoutjs.com/documentation/introduction.html
2. WeX5 binding Tutorial: http://docs.wex5.com/data-bind-instro/

"Share" the right way to open the WeX5 (3)--binding mechanism