avalon有关ViewModel与Model的同步问题

最新推荐文章于 2025-09-10 20:18:23 发布

weixin_34318956

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量126

点赞数

文章标签： json

本文详细介绍了Avalon框架中的三个核心元素M（Model）、V（View）和VM（ViewModel）之间的关系及作用机制。阐述了M作为普通JS对象如何与VM中的$json属性同步，并通过实例展示了V如何与VM互动，实现数据双向绑定。

经过几天的讨论，基本上确定了avalon的几个重要元素的关系。

Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.$json。有关的这个$json的名字还在商讨，详见这里

V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。

ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的$json属性就是Ｍ，可以见ＶＭ处于一切的核心。我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。并且出于节能低碳起见（减少对象的创建），我们在生成Ｍ时，会重复利用ＶＭ中的一些属性，比如vm的某个属性是一个对象，那么这个对象会直接搬到$json中。若它是一个数组，它里面每个元素为对象，这些数组或对象都会直接$json中去，当然有时会修复一下（比如计算属性会转换一个简单的数据类型）

下面是一个够为直观的例子：

            var b = {name: "xxx", eee: "ooo"}
            var array = [{name: "xxx"}, {title: "yyy"}]
            var a = avalon.define("xxx", function(vm) {
                vm.firstName = "司徒";
                vm.lastName = "正美";
                vm.nick = b;
                vm.array = array;
            });
            console.log(a.nick.$json === b);//true
            console.log(a.array.$json == array);//true
            console.log(a.array.$json[0] === array[0]);//true
            console.log(a.array[0].$json === array[0]);//true
            console.log(JSON.stringify(a.$json));//{"firstName":"司徒","lastName":"正美","nick":{"name":"xxx","eee":"ooo"},"array":[{"name":"xxx"},{"title":"yyy"}]}