My mvvm framework V3 tutorial-process-related

Each, with, if, and unless binding

Each binding is represented in HTML as data-each-*. The first * is the value, the second * is the key name, and * is just a placeholder, as long as it is a valid variable name, OK. The second * is optional. In the array, each * you can call it an element, and the second is the index value of the element. In other words, the foreach of each and PHP can process arrays and objects simultaneously.

Binding with is represented as data-with in HTML, allowing you to take out the first layer of the object and call it directly.

If binding in HTML is represented as data-If. If the return value of its parameter is false, it will not render its subnodes, and you will see them in the DOM tree.

Unless binding is represented as data-unless in HTML, which is opposite to If. If it is false, it is displayed and the child node is removed.

 
<Div data-on-Mouseover = "enabledetails"> mouse over me </div>
 

For example, in the above HTML, the element is Div, And the biner name is the second word on of the property name of data-*, that is, the event binder, the parameter removes the remaining words of data-on, that is, the Mouseover event is used, the callback is the property value, and enabledetails may be the accessor command, which is defined by the user in viewmodel. However, it is usually a common function. We can also use event proxy.

• Aaaa

This is Zhuge Liang. This is Zhou Yu.

Require ("aveon, ready", function ($) {var $ = $. mvvm; var VM =$ $. render ({User: {XXXX: "aaaa", yyyy: "BBBB"}, toggle: True, list: [{Title: "AAA"}, {Title: "BBB" },{ title: "CCC" },{ title: "DDD"}]}, document. getelementbyid ("mvvm-test"); setTimeout (function () {VM. toggle (false)}, 4500 )})
 

example

• AAAA

This is Zhuge Liang, And this is Zhou Yu.