Summary of avalon binding properties in JavaScript

avalon is a front-end MVVM framework that completely divides all front-end code into two parts. View processing is implemented through binding (angular has a cooler term called instructions), and business logic is concentrated in objects called VMs. As long as we operate on the VM's data, it will be automatically and magically synchronized to the view.

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

1. Scope delimitation

ms-controller: scan the DOM tree from bottom to top according to the principle of proximity

ms-important: scan only this The node and below are used as the scanning area

ms-skip: invalidate the binding

2. ms-duplex two-way binding attribute: In addition to binding (VM synchronizes data to V) data to the DOM node, it will also secretly add data to the node Bind a listening event to it, and when the node data changes, synchronize the data in V to the VM in time

(1) text, password, textarea requires the binding value to be a string (ms-duplex-text)

(2)radio: bound to boolean (ms-duplex-boolean)

(3)checkbox: bound to array (ms-duplex-string)

(4)select: bound to string or array ( ms-duplex-string)

is followed by the ms-duplex2.0 binding attribute

3. ms-visible: similar to toggle, the expression is displayed when true, and is displayed or hidden by setting the display to block or none

4. Insertion and removal processing ms-if: add node elements to display elements, set 2591ae4c846d4a71180fc085121ece31 comment to hide nodes (delete nodes)

5. Data cache ms-data-*, save objects or arrays Use ms-data (bound to the DOM node object instead of as an attribute), save it on the node, process the return when displayed, and bind it as data-* attribute

6. Attribute operation ms-class (class), ms- duplex(value),ms-attr,ms-href,ms-src

boolean attributes: ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked

String inherent attributes ：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 (external introduction)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9. Event binding: ms-on -eventName,ms-eventName

ms-mouseenter, ms-mouseleave (only applies to selected elements), ms-input (ms-on-input), the order of multi-event binding has nothing to do with natural numbers, but is related to the order of events

10. Loop operation

ms-each-traverse temporary variables (bound on the parent element)

ms-repeat-traverse temporary variables (bind on child elements)

ms-with-traverse temporary variables ( Bind on the parent element)

Array: el default temporary variable, $index the index of the current element, whether $first is the first element boolean, $last, $remove returns a function to delete the current element, $outer inner layer 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>

Modify the key value of the object:

Modify the object's key value Key-value pair:

Modify the value of the array: array object.set(subscript, value)

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

Traversal callback function (attribute)

data-each-rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

When looping, use size to calculate the data length, not length, use ms-if-loop instead ms-if, because ms-if takes precedence over ms-repeat execution

11. Template reference

12. Property monitoring

13. Module communication

The following introduces the avalon scope delimitation method

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

(1) ms-controller: This binding attribute will delineate the scope according to the principle of proximity. Start searching online from this tag first

(2) ms-important: This binding attribute only searches for this tag. If the vm binding data cannot be found, it will be output on the page as it is

(3) ms-skip: The function of this binding attribute is to invalidate the data binding, that is The interpolation expression is output as is, regardless of whether the bound data in the scope is found or not