【avalon】 1.1 视图模型理解

最新推荐文章于 2024-08-20 16:48:16 发布

子祥

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量638

点赞数

分类专栏： mvvm 文章标签： mvvm avalon javascript

本文链接：https://blog.csdn.net/lizixiang1993/article/details/50833503

版权

mvvm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前阅读了许多个不同的mvvm框架,但真正开始使用的确实avalon, 路要一步一步走,学习avalon也是为了更加快速的进入mvvm的世界里,之后也许会学习更多相关的开源框架.揭开这些神秘面纱。下面这张图是我从avalon官网中截取下来的.

View 视图 : 我们常常理解的html文本+css样式 , 用于展示里面的内容

Model模型 : 与内容相关,显示的核心内容均由Model里面提供,原始的方式是直接通过脚本语言输出并返回给浏览器.近年来随着js的发展以及异步获取数据这种方式越来越流行,大多数的网站为了提速,使用了数据与页面的分离.

ViewModel : View和Model的数据通信依靠ViewModel这一个中间层,使得两者联系在一起,当Model更新后会给View带来变化. ViewModel会在View层进行绑定Model,当触发了一定的规则（事件）,通过ViewModel处理后进而改变Model.

avlon 视图描写案例

编程环境： http://codepen.io/

HTML代码

<body>
<h1 ms-controller="demo" ms-text="content"></h1>
</body>

JS代码

var vm = avalon.define
({
$id : "demo",
content : "等待加载",
countDown : 3
});
function loaded
(){
vm.content = "加载成功";
}
var timeId = setInterval(function
(){
if(vm.countDown > 0
){
vm.countDown --;
vm.content = "加载中" + vm.countDown + "s";
}else
{
loaded();
clearTimeout(timeId);
}
},1000);

DEMO如下:

这对于初学者来说，略带有神奇的感觉,我以前用多了jquery,要改变DOM元素的文本还必须先找到该节点,然后再使用text()方法去改变.而这里我们只是定义了一下。就可以直接达到一样的效果了。这也许就是mvvm框架为我们省去了这样的操作了。不可否认的一点 , jQuery是一个优秀的库。而MVVM只是一种编程思想。两者也没有什么冲突。

子祥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【avalon】 1.1 视图模型理解

之前阅读了许多个不同的mvvm框架,但真正开始使用的确实avalon, 路要一步一步走,学习avalon也是为了更加快速的进入mvvm的世界里,之后也许会学习更多相关的开源框架.揭开这些神秘面纱。下面这张图是我从avalon官网中截取下来的.
复制链接

扫一扫