04avalon - vm内部属性($id)

简介: 04avalon - vm内部属性($id)

VM中以 $开头的属性 都是框架保留使用的特殊属性 ,大家为数据起名字时要小心避开

这些以$开头的属性,目前除了 $id, $events, $watch, $fire, $model比较稳定外, 其他系统属性在不同版本存在增删的情况.

  1. $id :vm的名字
  2. $watch : 用于添加监听函数
  3. $fire : 用于触发监听函数
  4. $events:用于储存监听函数
  5. $model :返回一个纯净的JS对象
  6. $element: 2.0新增, 当我们用ms-controller, ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.
  7. $computed: 2.2.1新增,用来集中定义计算属性

另外,avalon在VBScript或Object.defineProperty模式下不支持 追加新属性与方法

var vm = avalon.define({
        $id: "test",
        test1: "点击测试按钮没反应 绑定失败"
    })
    vm.aaa  = 'newProp'
    vm.newMethod = function () { //不能再追加此方法
        vm.test1 = "绑定成功"
    }

但我们可以通过以下方式,实现添加子属性。

var vm = avalon.define({
    $id: "test",
    placehoder: {}
});
setTimeout(function () {
    vm.placehoder = {//我们必须要通过 = ,直接添加一个对象来添加子属性, 不能
        aaa: 1, //vm.placehoder.aaa =1; vm.placehoder.bbb = 2这样分散地添加子属性
        bbb: 2
    }
}, 1000)

但在firefox4与chrome50后,浏览器支持Proxy对象,可以完美监听对象的增删改查,因此可以动态添加属性或方法

大家可以在浏览器控制台下敲入window.Proxy来知晓支持情况,也可以 通过avalon.config.inProxyMode来开闭此特性. 这个模式暂时只用于avalon.modern.js文件

VM中的数据更新,只能通过 = 赋值方式实现。但要注意在IE6-8,由于VM是一个VBScript对象,为VM添加新属性会抛错, 因此我们想批量更新属性要时格外小心了,需要用hasOwnProperty进行过滤。

注意在IE6-8 下,err是VBscript的关键字,VM中存在这个字段,就会将VM中的其他数组变成字符串,详见这里

为了性能起见,请确保你的对象结构足够扁平,套嵌层次不能太深,里面的数组不能太长。

目录
相关文章
|
8月前
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
41 1
|
8月前
|
监控 JavaScript 前端开发
05avalon - vm监控属性 ($watch)
05avalon - vm监控属性 ($watch)
45 0
|
8月前
|
监控
06avalon - vm计算属性 ($computed)
06avalon - vm计算属性 ($computed)
36 0
|
8月前
19avalon - 指令ms-class(类名绑定)
19avalon - 指令ms-class(类名绑定)
31 0
|
8月前
09avalon - vm是如何作用视图
09avalon - vm是如何作用视图
32 0
|
1月前
|
存储 搜索推荐 BI
sap.ui.comp.filterbar.FilterBar 的 persistencyKey 属性的作用介绍
sap.ui.comp.filterbar.FilterBar 的 persistencyKey 属性的作用介绍
|
8月前
35avalon - 指令ms-widget(组件绑定介绍)
35avalon - 指令ms-widget(组件绑定介绍)
22 0
|
8月前
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
281 0
|
9月前
|
Web App开发 API 开发者
关于 SAP UI5 Context.prototype.delete 方法的输入参数 Group ID 的细节
关于 SAP UI5 Context.prototype.delete 方法的输入参数 Group ID 的细节
|
移动开发 JSON JavaScript
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别
97 0
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别