EAIC前端mvvm框架
ebfui通过数据与页面模板的绑定来实现操纵数据就可更改页面展示,减少繁杂的DOM操作代码。
数据路径
页面模板中通过数据路径来与数据进行绑定。数据路径就是定位对象属性的路径,先看一个例子来理解数据路径:
    <script>
        $.vm({
            data:{
                money:100,
                user:{
                    id:3,
                    name:"Jack"
                }
            },
            event:{
                onLoad:function () {
                    //在这里处理页面的加载事件
                }
            }
        });
    </script>
    <style>
    //这里是页面样式定义
    </style>
    <page-template>
    <div>金额=${money}</div>
    <div>用户名为:${user.name}</div>
    </page-template>
运行效果
金额=100
用户名为:Jack
此例中,moneyuser.name便是数据路径,数据路径是相对于data对象而言的。
在数据改变事件中,也是通过数据路径来表明哪个数据改变了
    <script>
        $.vm({
            data:{
                money:100,
                user:{
                    id:3,
                    name:"Jack"
                }
            },
            event:{
                onDataChange:function(path){
                    if( path==="user.name"){
                        console.log("用户名改变了")
                    }
                }
            }
        });
    </script>
    <style>
    //这里是页面样式定义
    </style>
    <page-template>

    </page-template>
注意:在数据改变事件中,不可再对该数据进行修改,否则将导致无限循环!
    <script>
        $.vm({
            data:{
                money:100,
                user:{
                    id:3,
                    name:"Jack"
                }
            },
            event:{
                onDataChange:function(path){
                    if( path==="user.name"){
                        this.user.name = "Rose";//错误!不可在数据改变事件中改变此数据
                        this.money=200;//OK
                    }
                }
            }
        });
    </script>
    <style>
    //这里是页面样式定义
    </style>
    <page-template>

    </page-template>