Avalon Binding Properties in JavaScript summary _javascript tips

Avalon is a front-end MVVM framework that completely divides all the front-end code into two parts, and the processing of the view is implemented by binding (angular has a cooler noun call), and business logic is concentrated in an object called a VM. As long as we manipulate the VM's data, it magically synchronizes to the view naturally.

$model (all non-$ attributes), $event (Event object)

1, Scope delineation

Ms-controller: Scan the DOM tree from the bottom by the nearest principle

Ms-important: Only scan this node and below as scan area

Ms-skip: Disable Binding

2, Ms-duplex two-way binding properties: In addition to binding (VM Sync data to V) data to the DOM node, but also secretly bind a monitoring event on the node, when the node data changes, in time V data synchronization into the VM

(1) Text,password,textarea requires a binding value of a string (Ms-duplex-text)

(2) Radio: Binding to Boolean (Ms-duplex-boolean)

(3) CheckBox: Binding to an array (ms-duplex-string)

(4) Select: Bind to String or array (ms-duplex-string)

Behind the ms-duplex2.0 binding property

3, Ms-visible: Similar to toggle, the expression is true display, by setting the display to block or none to show or hide

4. Insert removal processing ms-if: Add node element display element, set <!--ms-if--> Annotation hidden node (delete node)

5, data cache ms-data-*, save objects or arrays using Ms-data (bound on a DOM node object rather than as a property), saved on a node, displayed with processing returned, bound to data-* property

6, attribute Operation Ms-class (Class), Ms-duplex (value), MS-ATTR,MS-HREF,MS-SRC

Boolean attribute: ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked

String intrinsic properties: Ms-attr-id,ms-attr-name,ms-attr-title,ms-src,ms-href

Custom attributes: Ms-attr-data-url,ms-attr-data-id

Ms-class:ms-class= ' active ' ms-class= ' Active:isok '
Ms-active,ms-hover

7, ms-duplex2.0

Ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

Auxiliary data-duplex-focus,data-duplex-changed,data-duplex-event

8, style operation: ms-css (inline), ms-class (externally introduced)

<button ms-click= "Toggle" ms-css-width= "M" > Show </button> <span ms-if= "Flag" >{{message}}</span >

9. Event Binding: Ms-on-eventname,ms-eventname

Ms-mouseenter,ms-mouseleave (for selected elements only), Ms-input (Ms-on-input), multi-event binding order is independent of natural numbers, related to event order

10. Circular operation

ms-each-Traversal of temporary variables (bound on parent element)

ms-repeat-Traversal of temporary variables (bound on child elements)

ms-with-Traversal of temporary variables (bound on parent element)

Array: El default temporary variable, $index the index of the current element, $first is the first element Boolean, $last, $remove return a function to delete the current element, $outer inner loop outer loop variable

Hash (object): $key key Name, $val key value, $outer ($outer. $index)

<ul> <li ms-repeat-e= "Data" >{{e}}</li> </ul> <ul ms-each-e= "Data" > <li>{{e}}< /li> </ul>

To modify the key value of an object:

To modify the key value pairs for an object:

To modify the value of an array: Array object. Set (subscript, value)

Modify object value in array: Array object [subscript]. Key name = key value;

Traversal callback function (properties)

Data-each-rendered

Data-with-rendered

Data-repeat-rendered

data-with-sorted

Use size to compute the length of the data, rather than length, using Ms-if-loop instead of ms-if because ms-if takes precedence over ms-repeat execution

11, template Reference

12. Property Monitoring

13. Module Communication

Below is a description of the Avalon scoping method

When using AVALONJS to do front-end development, you need to delineate the scope of data binding, there are three ways:

(1) Ms-controller: This binding property will be based on the nearest principle to delimit the scope, first from this tab to start online search

(2) Ms-important: This binding property finds only this label, and if the VM binding data is not found, it is exported on the page

(3) Ms-skip: The effect of this binding property is to invalidate the data binding, that is, the interpolation expression is output, whether or not to find bound data in the scope

The above is a small set of JavaScript to introduce the Avalon binding attribute summary, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!