ASP.NET MVC4 结合MVVM的应用初探（一）——国产大牛MVVM框架avalon应用

king_tt

浏览: 2100045 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

liangjijiang

jacky_dai

ljmomo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-01 ( 5)
2016-12 ( 132)
2016-11 ( 17)
更多存档...

【前言】

长久以来，凭借一股热情，作为一个半路信佛（尚未出家）的中年野和尚，一直在自学asp.net mvcX，希望有朝一日能写出一个简单的小微企业内部使用的动态网站出来——这是我粗浅的理想。

紧跟微软是我的选择，这是因为微软太牛逼，敢于把任何复杂的东西傻瓜化（效果另论），这种牛气冲天的精神，我表示深深折服。何况我现在盗版的庞大的VisualStudio系列用着，何止一个爽字了得（VS也有express版的，懒得下）。当然，有免费的我尽量不用盗版，比如sqlserver我就只用express版……扯远了，支持正版。

【为什么MVVM】

asp.net mvc从3.0到4.0（现在5.0也出来了），感觉写网站确实比从前要方便多了。技术更新速度也挺快。尤其是mvc3让人感动地引入了razor语法，再写view时那抑制不住骚动的心，当浮一大白。

因MVC关注点分离的特性，写view时就其实有更多便利的方式可供选择，也就是说，其实用微软自己的razor语法已经很方便了，但真正实际开发时，为提高效率等，仍然迫切需要配合jquery来做好前端。而jquery近些年的大量使用，令不甘寂寞的程序员们大为光火，如你所知，程序员是最懒的一帮子人了（他们为了节省时间哪怕按毫秒记，节省操作哪怕能少点一下鼠标，废寝忘食，以变态的方式改进程序哪怕一点点进步，敬佩），他们在以“懒”推动着技术的进步。他们称用Jquery陷入了dom操作的泥淖，必须尽早拔出脚来，我们的征途是星辰大海。

于是，各种MVVM框架出来了（什么是MVVM，请度娘之），微软在asp.net mvc4中，也贴心地默认附上了knockout.js，这是微软矢志不渝搞傻瓜化的表现之一。可惜knockoutjs谈不上好用，我也大概找了一些资料，有不少东西难以理解，源码也根本看不懂。

除此之外，还有其它框架emberjs，还有高大上的angular等等，不一而足。这些东西都是好的，但对于我的征途只是门前菜地的中年野和尚来说，入门太费劲了。

【avalon】

博客园里有位大牛名叫司徒正美，他基于对knockout的深入研究（据说avalon的早期版本），写了一个MVVM框架：avalon，目前版本0.99x，我试用了一段时间，只想说四个字：牛逼死了。如果这个框架能让更多人应用，并且一统江湖千秋万代鸟生鱼汤，我还要再加四个字：请带上我。

avalon到底是什么呢？它是和knockout，angular等都有点儿像又不太像的，同步视图的东西。当然这个概念并不准确，但便于理解。avalon在asp.net mvc中的应用，简单来讲，就是view视图中，实现dom元素与数据的绑定，把程序员的关注点放到“数据”上，而不是“dom”上。对数据的更改，可以立即反应到页面表现上。

【第一个例子】

司徒大牛自己写的第一个例子如下：

 1 <!DOCTYPE html>
 2  <html>
 3      <head>
 4          <title></title>
 5          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6          <script src="avalon.js"></script>
 7      </head>
 8      <body>
 9          <div ms-controller="box">
10              <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h"  ms-click="click"></div>
11              <p>{{ w }} x {{ h }}</p>
12              <p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p>
13              <p>H: <input type="text" ms-duplex="h" /></p>
14          </div>
15          <script>
16              avalon.define("box", function(vm) {
17                  vm.w = 100;
18                  vm.h = 100;
19                  vm.click = function() {
20                      vm.w = parseFloat(vm.w) + 10;
21                      vm.h = parseFloat(vm.h) + 10;
22                  }
23              })
24          </script>
25      </body>
26  </html>

我来解释一下：使用avalon的三板斧：

在view页面中引用avalon.js文件（asp.net mvc4也可以写到BundleConfig里）。
在<script>里定义视图模型vm（关于这个vm，可是大有学问，话说我理解它足足用了特么两个星期，说明什么？我笨？你出去。后面我会专门开辟一节讲这个vm，这是个重点），即 avalon.define("box",function(vm){})，这个“box”是准备用来控制影响范围的标识，名字随便起个有意义的容易记的就好。
define的回调函数里，对vm的各个属性赋值。最后不要忘了加一个扫描avalon.scan(); 但司徒老大的这个例程里怎么没这句？奇怪。

以上是js部分，在html里还要在dom元素上添加一些特有属性，实现绑定。

首先介绍一下{{}}，这两个大括号括起来是插值运算符，是一种单向绑定，也就是说，可以把vm中的定义的数据，刷新到视图中。比如vm.w=100;在html中写{{w}}，那么框架会把{{w}}替换为vm.w的值100。如果想在视图界面中更改这个w值，并回传给vm数据怎么办？好了，我们在交互方面非常重要的ms-duplex出马啦。ms-duplex是双向绑定函数，常用于input标签中，对数据的绑定，在input中对它的修改会立即反应到vm中去。

说到这里，估计你就明白了。其实IT界所有的技术进步，几乎无一不是为了让一切变得更简单（当然，前提是要功能满足需求），MVVM实现了view和vm的绑定和代码分离，耦合减少，实为前端coder不可多得的致命法宝。

不过，你用我上面写的几行东西，还是跑不起来，有个ms-controller你别忘了，它也要加到html中，你认为vm要在这个范围内起作用的dom元素中去。上面例程中的名字是"box"。另外，关于ms-controller还有一些知识，比如它可以嵌套，还会自动向上寻找等等，如果你们是多人开发，而且还有猪一样的队友，介绍你认识ms-important绝不会错。猛戳这里：http://rubylouvre.github.io/mvvm/avalon.important.html

下一节，我会写一个asp.net mvc4下的第一个例程，来告诉你如何从后台拿数据到前台来绑定，顺便介绍一些avalon的常用api。敬请期待……

分享到：