Home > Developer > Web Develop
Avalon is a batch output of a set of data through the ms-repeat implementation. This set of data can be an array, or it can be a hash (or called an object). Let's start with the array.
The second section says that any array defined in the VM will be transferred to the monitor array if it is not preceded by $ or is not placed in the $skiparray array. The monitoring array is actually an ordinary array of push, Unshift, shift, pop, splice, sort, reverse methods that have been rewritten. Of course it also adds some other methods, such as set, Pusharray, remove, removeAt, RemoveAll, clear, ensure, contains, size. We can synchronize the view just by manipulating these methods.
<! DOCTYPE html>The above is the array is transformed into a monitoring array after the style, adding a lot of properties and methods. Ms-repeat is used in conjunction with the monitoring array. We have noticed that, in the scope of ms-repeat, there are more than two variables of El, $index, which are not found in VMS (ViewModel). This is a unique feature of loop binding, where El is referred to as the proxy VM, $index is the index value corresponding to this el. And this El can be configured, as
<! DOCTYPE html>Speaking of scope, we can see that ms-repeat is the current element based on the number of current array, the original element as a template, in situ repeated n-times implementation.
With the loop binding, we want to make a switch card that is very simple.
<! DOCTYPE html>Here is a ms-if-loop, the third section introduces the execution order of the binding properties, Ms-if is performed before Ms-repeat, and when I want to do some branching decisions based on the elements in the loop, it is not possible. Therefore needs a ms-repeat later than the ms-if, so Ms-if-loop was born.
In the loop, the ms-repeat produces temporary variables such as El, $index, and other variables for us to dispatch.
Their relationship is like the following JavaScript loop code:
for (var i = 0, n = array.length; i < n; i++) { //----> Ms-each-el=array var el = array[i]//$index--i< C3/>for (var j = 0, k = el.length; J < K; J + +) { //---> Ms-each-elem=el var elem = el[j]//elem. $outer--- ; El }}Let's take a look at how $first, $last, $remove are used:
<! DOCTYPE html>When we click on the LI element, it automatically removes the corresponding element from the monitoring array, synchronizes the view immediately, removes the element node we just clicked, and adjusts the $index, $first, $last of the other elements to ensure that the first and last class names are displayed correctly.
$outer are mainly used in two-dimensional arrays or multidimensional arrays.
<! DOCTYPE html><body ms-controller= "Test" > <table border= "1" > <tr ms-repeat-el= "Array" > < TD ms-repeat-elem= "El" >{{elem} It is located in section <b style= "Color:orchid" >{{$outer. $index}}</b> Line </td > </tr> </table> </body><! DOCTYPE html>If we want to get the length of the current array in the binding property, remember to use the size method, not directly with the length property. Let's take a copy and show how to call its method to synchronize the view.
<! DOCTYPE html>Is it cool to manipulate the view by manipulating the properties? To know the above code if you change to jquery to not write how many lines do not know how to write!
Let's take a little more practical example.
<! DOCTYPE html>In addition, we can also use data-each-rendered to specify that these elements are inserted after the DOM is rendered and executed after the callback, this pointer to the element node, there is a parameter represented as the current operation, is add, Del, move, Index or clear.
We've said something about the array, and we'll see how it operates the hash. For hashing, ms-repeat only produces $key, $val, $outer three variables, no $index or anything. $key is the property name, $val is the property value, $outer is the same as the previous explanation. If you want to use $index while the object is looping, you can do this:
<! DOCTYPE html>We can use the data-with-sorted callback if we want to control the output order of object properties, or let some elements not output. It uses ms-repeat, ms-with binding, to catch the object before rendering trigger, requires the output of a string array, the object's key value pair will be output according to it; the framework defaults to the array of all the key names of the original object as parameters.
Let's change the example above:
<! DOCTYPE html>But Ms-repeat can only loop itself, if sometimes we encounter some complex structure, such as defining the list, then we can use Ms-each, Ms-with. Ms-each is used for looping objects, and Ms-with is a looping object. In addition to the range of loops, the other is no different from ms-repeat.
<! DOCTYPE html>Loop binding is a very important binding, is one of the process bindings, usage and attention point very much, we can continue to learn here.
Mini MVVM Framework Avalonjs Learning Tutorial 11, looping operations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
