avalon的双向绑定机制，是通过一条依赖链实现。此依赖链最底层是监控属性、监控数组，中层是计算属性、监控函数，再上点是求值函数，最上层是视图刷新函数。

所谓计算属性，监控属性，监控函数属性，我们改变它们的值，它们会引发视图变化；而监控数组，是我们调用它的一些方法，也会引发视图变化。

var vm = avalon.define({

        a: "这是监控属性",

        $b: "这是非监控属性",

        $skipArray: ["c", "d"],

        c: "位于$skipArray里，因此也是非监控属性",

        d: "位于$skipArray里，因此也是非监控属性",

        obj: {//这个obj是一个子VM

            xx: "xxx"

        },

        fn: function() {

            alert(1)//这里面没有vm的监控属性（仅指其第一层属性），因此是一个普通函数

        },

        fn2: function() {

            return vm.a //这里面有vm的监控属性（仅指其第一层属性），因此是一个监控函数

        },

        fn3: function() {

            return vm.fn2()//fn2是方法而不是监控属性，因此也是一个普通函数

        },

        array: [1, 2, 3], //这是一个监控数组

        computed: {//这是一个计算属性，因此它有一个get方法，this指向vm

            get: function() {

                return this.a + this.$b

            }

        },

        computed2: {//这是一个计算属性，因此它有get，set方法

            get: function() {

                return this.a + "!!!"

            },

            set: function(v) {

                this.a = v

            }

        },

        ccc: {//这一个普通的对象，构成一个子VM，因为计算属性只允许最多有两个方法，不能出现第三个属性

            get: function() {

                return this.a + "!!!"

            },

            set: function(v) {

                this.a = v

            },

            host: {}

        }

    })

为了性能起见，我们需要将一些属性变成不可监控。这有两个途径，在属性名或方法名前加一个$，或者把属性名放到$skipArray数组里。

监控属性，计算属性，监控属性什么都是位于VM中；而最上面两层是位于视图，通过分解绑定属性，推断出来。比如说ms-text=”aaa”，我们从属性名得到其视图刷新函数（所有视图刷新函数都定义在 avalon.bindingExecutors对象上），求值函数是通过内部的parseExpr方法编译出来。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="avalon.js" type="text/javascript"></script>

        <script>

            vmodel = avalon.define({

                $id: "test",

                a: 1,

                b: 2,

                fn: function() {

                    return  (parseFloat(vmodel.a) || 0) + (parseFloat(vmodel.b) || 0)

                }

            })

        </script>

    </head>

    <body ms-controller="test">

        <div><input ms-duplex="a"/>{{a}}</div>

        <div><input ms-duplex="b"/>{{b}}</div>

        <div>{{fn()}}</div>

    </body>

</html>


<!DOCTYPE html>

<html>

    <head>

        <title>ms-class</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="avalon.js"></script>

        <style>

            .green{

                 background: green;

            }

        </style>

        <script type="text/javascript">

            var model = avalon.define({

                $id: "test",

                array: [],

                add: function(){

                    model.array.push(1)

                },

                remove: function(){

                    model.array.pop()

                }

            })

        </script>

    </head>

    <body ms-controller="test" >

        <div ms-class="green: array.length" style="width:400px;height:200px">

            <button ms-click="add" type="button">add</button><button ms-click="remove" type="button">remove</button>

        </div>

    </body>

</html>


一般情况下，都是上层依赖下层，下层发生改变，就会自动向上冒泡，到视图刷新函数这一层，实现视图的改变，只有一个例外，就是ms-duplex。它会偷偷 在视图上绑定一些事件，通过监听表单元素的值，将它直接同步到下方的监控属性与计算属性。

迷你MVVM框架 avalonjs 学习教程21、双向绑定链的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  2. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  3. 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

    avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...

  4. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  5. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  6. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  7. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  8. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  9. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

随机推荐

  1. winform datagridview 不显示默认第一列 不显示未绑定列 数据源发生改变时自动更新 (转)

    不显示带星号的第一列: datagridview属性框中将 RowHeadersVisiber 设置为  false 不显示未绑定列: datagridview有一个属性是 AutoGenerateC ...

  2. bzoj 2616 SPOJ PERIODNI——笛卡尔树+树形DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2616 把相同高度的连续一段合成一个位置(可能不需要?),用前缀和维护宽度. 然后每次找区间里 ...

  3. Windows10安装.net3.5

    1.装载windows10映像 2.运行如下命令(注意修改盘符): Dism /online /enable-feature /featurename:NetFX3 /All /Source:F:\s ...

  4. JQuery 实现 Tab 切换 index

    $(function(){ var h_new=$('.new h4 a'); var new_dl=$('.new dl'); new_dl.first().show(); h_new.mousee ...

  5. golang之配置环境

    从https://golang.org/dl/下载相关包,直接解压 目录大概这样 golang ├── go └── mods 配置环境变量 vim ~/.profile(debian需要勾选shel ...

  6. 【ActiveMQ入门-5】ActiveMQ学习-Queue与Topic的比较

    Queue与Topic的比较 1.JMS Queue执行load balancer语义: 一条消息仅能被一个consumer收到. 如果在message发送的时候没有可用的consumer,那么它将被 ...

  7. python学习笔记--pycurl模块安装遇到的问题。

    1.用easy_install安装的时候 [root@idayuan ~]# easy_install pycurl Searching for pycurl Best match: pycurl A ...

  8. charles只获取指定的请求的设置方法

    过滤网络请求 通常情况下,需要对网络请求进行过滤,只监控指定服务器的请求.有3种办法: 方法一:在主界面的中部的 Filter 栏中输入需要过滤出来的关键字.例如我们的服务器的地址(host)是:ww ...

  9. 垃圾收集器之：G1收集器

    G1垃圾收集器是一种工作在堆内不同分区上的并发收集器.分区既可以归属于老年代,也可以归属新生代,同一个代的分区不需要保持连续.为老年代设计分区的初衷是我们发现并发后台线程在回收老年代中没有引用的对象时 ...

  10. Vue引用其他组件，但组件某些部分不需要时的简单处理

    项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...