随着 Web2.0 技术日新月异的发展，各个 Web 软件应用的前端的复杂度已经远远超出了我们的预期，于是，MVC 便再次出现了 -- 前端 MVC 模型，也即 Web2.0 的 MVC 模型。与此同时，相应的前端 MVC 框架也应运而生：Dojo 这样一个强大且完善的 Web 开发控件库，首当其冲的实现了一套基于 MVC 模式的框架工具包，让我们可以非常方便快捷地构造我们的 Web2.0 前端 MVC 应用。这篇文章将重点介绍 Dojo 的 MVC 工具包所带给我们的各种便利以及他的一些使用技巧。
Dojo 的 MVC 包是基于 MVC 的思想开发的，但是，它主要关注前端的 View 和 Model 之间的数据绑定上。它不同于 Dojo 的 APP 包，考虑整个应用的级别的不同层次的控制。基于 Dojo 的 MVC 包，我们能实时同步我们的表单控件和 Model 数据，无论哪一方变化，另一方都会">实时更新。而且，多个表单能绑定到同一个 Model 数据上，以实现多处同步更新的效果，同样，也会有表单变化到数据更新再到其他表单更新的效果。
Dojo 的 MVC 的简单示例
我们先从一个简单示例入手，让大家了解一下 Dojo 的 MVC 工具包是如何工作的。先来构造我们的 Model 层：
清单 1. 简单 Model 示例
var model; require([ "dojo/parser", "dojo/Stateful", "dojo/domReady!" ], function(parser, Stateful){ // dojo/Stateful 构造 model model = new Stateful({First: "John", Last: "Doe", Email: "jdoe@example.com"}); parser.parse(); });
这里我们使用最简单的 dojo/Stateful 对象构造我们的 Model，便于理解。接下来我们就要把我们的“View”表单元素绑定到该 Model 上以实现同步：
清单 2. 简单 View 示例
<script type="dojo/require">at: "dojox/mvc/at"</script> <div id="wrapper"> <div id="header"> <div id="navigation"></div> <div id="headerInsert"> <h1>Input Ouput Sync</h1> <h2>Data Binding Example</h2> </div> </div> <div id="main"> <div id="leftNav"></div> <div id="mainContent"> <div class="row"> <label class="cell" for="firstnameInput">First:</label> <input class="cell" id="firstnameInput" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, 'First')"> <!-- span 中的内容会永远与 Textbox 同步，也与 Model 同步 --> (First name is: <span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'First')"></span>) </div> <div class="row"> <label class="cell" for="lastnameInput">Last:</label> <input class="cell" id="lastnameInput" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, 'Last')"> (Last name is: <span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'Last')"></span>) </div> <div class="row"> <label class="cell" for="emailInput">Email:</label> <input class="cell" id="emailInput" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, 'Email')"> (email is: <span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'Email')"></span>) </div> </div> </div> </div>
可见，这里只需要通过“value: at(model, 'First')”即可实现数据的绑定工作。一旦用户修改输入框 Textbox 中的内容，其对应的 model 会做出相应的更新，并反映到 Output 控件上。