广州市天河区天河路621号天娱广场西塔10楼
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
此例中,
money和user.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>