Avalon2之VM

原创 2017年07月31日 16:29:08

上一篇《Avalon2简介》中介绍了Avalon的基本信息,今天我们紧跟着上一篇文章来详细看一下VM的内容。
按照Avalon官方文档的说法,VM属于比较重型的对象。

  1. 超轻量 Object.create(null)
  2. 轻量 一般的对象 {}
  3. 重量 带有访问器属性的对象, avalon VM对象
  4. 超重量 各种节点或window对象

内部属性

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

如果我们需要向VM中添加新属性,我们可能会这样写:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test"
            })
            setTimeout(function() {
                vm.name = "jianggujin";
            }, 2000);
        </script>
    </head>

    <body ms-controller="test">
        <div>Welcom, {{name}}</div>
    </body>

</html>

为了模拟添加数据,我们在延迟2秒后,增加了一个name属性,运行后我们会发现这样通常不会按照我们期望的那样显示,想要实现期望的效果,我们需要稍微修改下上面的代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                data: {}
            })
            setTimeout(function() {
                vm.data = {
                    name: "jianggujin"
                };
            }, 2000);
        </script>
    </head>

    <body ms-controller="test">
        <div>Welcom, {{data.name}}</div>
    </body>

</html>

这里面的data只是用来方便vm监控属性的,我们也可以起一个其他的名字,使用这种方式,当我们需要添加新属性的时候,需要使用=进行赋值,如果仅需要更改属性的值,则可以直接修改,比如:vm.data.name="jiang";

监控属性

在VM中,改变它们会引起视图改变的属性。如果一个属性是$开头, 或在定义时放在$skipArray数组中,或是函数或节点元素, 它们都不会转换成监控属性.
此外, 改变监控属性的值还会触发对应的$watch监听回调。

计算属性

计算属性是监控属性的强化版,它必须依赖于1个或多个监控属性。通过普通的监控属性实现对视图的监听,它自身的变化也由监控属性进行驱动。
计算属性集中定义在$computed对象中。有多种形式。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                welcom: 'Welcom',
                name: 'jianggujin',
                $computed: {
                    fullName: function() {
                        return this.welcom + ' ' + this.name
                    }
                }
            })
        </script>
    </head>

    <body ms-controller="test">
        <div>{{fullName}}</div>
    </body>
</html>

非监控属性

这包括框架添加的$id, $events, $model属性, $fire, $watch, $render方法, 及用户自己设置的以$开头的属性,放在$skipArray数组中的属性,值为函数、各种DOM节点的属性, 总之,改变它们的值不会产生同步视图的效果。

版权声明:本文为博主原创文章,转载请标明出处。

WebStrom中项目avalon框架中vm赋值的问题?

从图中可以看出vm对象userBean被赋值了,之后该vm对象还进行值的修改。vm复制之后会先去页面的读取该值。所以修改无效。 控制台输出结果显示: 只能先修改之后再赋值给vm对象才行。 ...
  • u014505990
  • u014505990
  • 2017年08月04日 15:38
  • 188

迷你MVVM框架 avalonjs 入门教程

.main h3{ background: black; color:#fff; padding: 5...
  • dyllove98
  • dyllove98
  • 2013年07月11日 22:46
  • 20206

avalon绑定属性总结

$model(所有非$属性),$event(事件对象) 1、作用域圈定 ms-controller:按着就近原则自下而上扫描DOM树 ms-important:仅扫描本节点及之下作为...
  • qq_24549805
  • qq_24549805
  • 2016年12月14日 14:40
  • 1086

用avalon写的一个弹窗demo

之前项目中,用avalon写的一个模块,单独拿出来了,一个小弹窗的效果。 demo地址: http://www.hui12.com/nbin/demo/4a/4a.html html: ...
  • nbin2008
  • nbin2008
  • 2016年06月05日 22:41
  • 6455

avalon学习笔记(五)

五,搭建一个工程环境 到此,基础的理论都搞得差不多了,是时候做个实际的例子 换个教程,根据《avalon学习教程》系列--《1、引入avalon》建立一个新项目。 我用的vs2013comm...
  • u014761456
  • u014761456
  • 2015年01月07日 00:23
  • 1215

avalon监控属性、非监控属性$watch

监控属性:avalon进行正常的默认处理 非监控属性:avalon会忽略处理
  • yang1464657625
  • yang1464657625
  • 2016年12月05日 15:40
  • 1947

项目中学习---avalon表格渲染函数的了解

vm.$customerUserListOpts = { columns: [ {key: "i...
  • u013045959
  • u013045959
  • 2016年10月29日 16:38
  • 884

avalon过滤器基础用法

avalon过滤器基础入门案例
  • yang1464657625
  • yang1464657625
  • 2016年12月05日 14:25
  • 1963

avalon中的模板绑定(ms-include)

avalon中的模板引入分为 内部模板 和 外部模板 1.内部模板 .ms-controller,.ms-important,[ms-control...
  • tyler1108
  • tyler1108
  • 2015年06月19日 15:02
  • 3953

avalon实现数组升降序排列

avalon简单数组升降序基础案例
  • yang1464657625
  • yang1464657625
  • 2016年12月05日 14:48
  • 498
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Avalon2之VM
举报原因:
原因补充:

(最多只允许输入30个字)