随身笔记

作者： admin

  • avalon监听回调 $watch

    $watch是avalon重要又实用的属性，此方法是用于监听vm中的对象的属性变化。

    监听函数有三个参数， 第一个是新值， 第二个是旧值， 第三个是发生变动的属性的名字。

    $watch方法供与其他操作DOM的库一起使用的,如富文本编辑器什么. 在$watch回调里更新VM自身的属性是非常危险的事,很容易引发死循环

    能监听:
    第一层属性值变化;
    数组长度变化;
    对象属性内容变化;
    不能监听:
    数组内容变化;
    对象长度变化
    推荐使用数据格式：

    [{a:123},{b:'你好'}]

     

    支持通配符*

    下面是$watch方法的的七种用法:

    var vm = avalon.define({
 $id: "test",
 array: [1, 2, 3],
 d: 888,
 arr: [{
     a: 1
   }, {
     a: 2
   }, {
     a: 3
   }],
 obj: {
   a: 1,
   b: 2
 },
 a: {
   b: {
     c: {
       d: 33
     }
    }
 }
})

var expect = function (a) {
  return {
   to: {
     be: function (b) {
       console.log(a == b)
     }
   }
  }
}

vm.$watch("array.length", function (a, b, name) {
  console.log('第一组 数组长度', name)
})
vm.$watch("arr.*.a", function (a, b, name) {
 expect(a).to.be(99)
 expect(b).to.be(1)
 console.log('第二组 数组元素属性(模糊匹配, 不知道哪个元素变化)', name)
})
vm.$watch("obj.a", function (a, b, name) {
 expect(a).to.be(111)
 expect(b).to.be(1)
 console.log('第三组 属性的属性', name)
})

vm.$watch("obj.*", function (a, b, name) {
 expect(a).to.be(111)
 expect(b).to.be(1)
 console.log('第四组 属性的属性(模糊匹配)', name)
})

vm.$watch("a.b.c.d", function (a, b, name) {
 expect(a).to.be(88)
 expect(b).to.be(33)
 console.log('第五组 属性的属性的属性', name)
})
vm.$watch("a.*.c.d", function (a, b, name) {
 expect(a).to.be(88)
 expect(b).to.be(33)
 console.log('第六组 属性的属性的属性(模糊匹配)', name)
})
vm.$watch("*", function (a, b, name) {
 expect(a).to.be(999)
 expect(b).to.be(888)
 console.log('第七组 第一层对象的任意属性(模糊匹配)', name)
})
setTimeout(function () {
 vm.array.set(1, 6)
 vm.array.push(99)
 vm.arr[0].a = 99
 vm.obj.a = 111
 vm.a.b.c.d = 88
 vm.d = 999
}, 100)

     

     

    解除监听

    $watch方法就是返回了一个函数

    var unwatch = vm.$watch("array.*", function (a, b) {
 expect(a).to.be(6)
 expect(b).to.be(2)
})
unwatch() //移除当前$watch回调

  • avalon设置唯一id $id

    不管多少个ms-controller或者ms-important都要为其设置唯一的id，必选。

    var vm=avalon.define({
  $id:'test'
});

  • 查看avalon全局视图模型avalon.vmodels

    查看avalon全局视图模型avalon.vmodels

    //创建了2个avalon视图模型
<body ms-controller="test">

 <div ms-controller="test2"></div>

</body>
    var vm=avalon.define({
  $id:'test',
  text:'1',
  array:[11,'我','ta'],
  click1:function(){
    alert(1);
  }
});

 var vm2=avalon.define({
    $id:'test2'
 });

 console.log(avalon.vmodels);

在控制台中就会打印出：
Object {test: Observer, test2: Observer}

     

     

     

  • avalon查看版本号avalon.version

    查看当前使用的avalon版本号

    <script>
  alert(avalon.version)
</script>

  • avalon创建视图模型avalon.define()

    现在创建一个avalon视图模型就用define()方法。

    1.5或者2.x一般都用这种书写方法：

    avalon.define({
   $id: 'aaa',
   bbb: 1
})