Mini MVVM Framework Avalonjs Learning Tutorial 21, two-way binding chain

Avalon's two-way binding mechanism is implemented through a chain of dependencies. The bottom of this dependency chain is the monitoring attribute, the monitoring array, the middle is the calculation attribute, the monitoring function, then the point is the evaluation function, the topmost is the view refresh function.

The so-called computed attributes, monitoring properties, monitoring function properties, we change their values, they cause the view to change, and the monitoring array is the way we call it, and it also causes the view to change.

var vm = Avalon.define ({A: "This is a monitoring attribute", $b: "This is a non-monitoring attribute", $skipArray: ["C", "D"], C: "In $skiparray , so also non-monitoring attribute ", D:" is located in $skiparray, so also non-monitoring attribute ", obj: {//This obj is a sub vm xx:" XXX "}, Fn:fun Ction () {alert (1)//There is no monitoring attribute for the VM (only its first layer attribute), so it is a normal function}, Fn2:function () {return VM.A        There is a monitoring property for the VM (only its first layer property), so it is a monitor function}, Fn3:function () {return vm.fn2 ()//fn2 is a method rather than a monitoring property, and therefore a common function  }, array: [1, 2, 3],//This is a monitoring array computed: {//This is a computed property, so it has a Get method, this points to VM Get:function () {return THIS.A + this. $b}}, Computed2: {//This is a computed property, so it has Get,set method ge            T:function () {return THIS.A + "!!!" }, Set:function (v) {this.a = v}}, CCC: {//This is a trivial object that forms a sub-VM, because the computed property only allows There are up to two methods that cannot appear with a third attribute get:function () {return THIS.A + "!!! "}, Set:function (v) {this.a = v}, host: {}}}) 

For performance reasons, we need to turn some properties into non-monitoring. There are two ways to add a $ to the property name or method name, or to put the property name in the $skiparray array.

Monitor properties, calculate properties, monitor properties Everything is in the VM, and the top two layers are in the view, inferred by decomposing the binding properties. For example ms-text= "AAA", we get its view refresh function from the property name (all the view refresh functions are defined on the Avalon.bindingexecutors object), the evaluation function is compiled by the internal parseexpr method.

<! DOCTYPE html>
<! DOCTYPE html>