迷你MVVM框架 avalonjs 学习教程21、双向绑定链

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

enter image description here

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


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>

enter image description here


<!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>

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

你可能感兴趣的:(val)