核心操控点在于Controller，Controller会组织model以及view由于Controller上注册的各系列事件，会引起model的变化，每次model产生变化后会重新通知，Controller 通知view update操作这个时候view会获取viewController的状态值以及model的数据渲染出新的viewview只负责html渲染model只负责操作数据，并且通知观察者改变事件Controller将view以及model联系起来，所有的事件全部注册至ControllerPS：传统的View会包含事件交互，这里放到了Controller上模型会把datamodel的改变通知到控制器，控制器会更新视图信息，控制器根据view组成dom结构，并且注册各种UI事件，又会触发datamodel的各种改变这就达到了理想情况的view与model的分离，一个model（adpter可用于多个viewController），一个dataAdpter的改变会影响两个视图的改变这个MVC可以完全解耦view以及model，view的变化相当频繁，若是model控制view渲染便会降低model的重用这里首先举一个例子做简单说明：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ToDoList</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" type="text/CSS" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css"> 8 <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css"> 9 <link href="../style/main.css" rel="stylesheet" type="text/css" /> 10 <style type="text/css"> 11 .cui-alert { width: auto; position: static; } 12 .txt { border: #cfcfcf 1px solid; margin: 10px 0; width: 80%; } 13 ul, li { padding: 0; margin: 0; } 14 .cui_calendar, .cui_week { list-style: none; } 15 .cui_calendar li, .cui_week li { float: left; width: 14%; overflow: hidden; padding: 4px 0; text-align: center; } 16 </style> 17 </head> 18 <body> 19 <article id="container"> 20 </article> 21 <script type="text/underscore-template" id="template-Ajax-init"> 22 <div class="cui-alert" > 23 <div class="cui-pop-box"> 24 <div class="cui-hd"> 25 <%=title%> 26 </div> 27 <div class="cui-bd"> 28 <div class="cui-error-tips"> 29 </div> 30 <div class="cui-roller-btns" style="padding: 4px; "><input type="text" placeholder="设置最低价 {day: '', PRice: ''}" style="margin: 2px; width: 100%; " id="ajax_data" class="txt" value="{day: , price: }"></div> 31 <div class="cui-roller-btns"> 32 <div class="cui-flexbd cui-btns-sure"><%=confirm%></div> 33 </div> 34 </div> 35 </div> 36 </div> 37 </script> 38 <script type="text/underscore-template" id="template-ajax-suc"> 39 <ul> 40 <li>最低价：本月<%=ajaxData.day %>号，价格：<%=ajaxData.price %> 元</li> 41 </ul> 42 </script> 43 44 <script type="text/underscore-template" id="template-ajax-loading"> 45 <span>loading....</span> 46 </script> 47 48 <script src="../../vendor/underscore-min.js" type="text/javascript"></script> 49 <script src="../../vendor/zepto.min.js" type="text/Javascript"></script> 50 <script src="../../src/underscore-extend.js" type="text/javascript"></script> 51 <script src="../../src/util.js" type="text/javascript"></script> 52 <script src="../../src/mvc.js" type="text/javascript"></script> 53 <script type="text/javascript"> 54 55 //模拟Ajax请求 56 function getAjaxData(callback, data) { 57 setTimeout(function () { 58 if (!data) { 59 data = {day: 3, price: 20}; 60 } 61 callback(data); 62 }, 1000); 63 } 64 65 var AjaxView = _.inherit(Dalmatian.View, { 66 _initialize: function ($super) { 67 //设置默认属性 68 $super(); 69 70 this.templateSet = { 71 init: $('#template-ajax-init').html(), 72 loading: $('#template-ajax-loading').html(), 73 ajaxSuc: $('#template-ajax-suc').html() 74 }; 75 76 } 77 }); 78 79 var AjaxAdapter = _.inherit(Dalmatian.Adapter, { 80 _initialize: function ($super) { 81 $super(); 82 this.datamodel = { 83 title: '标题', 84 confirm: '刷新数据' 85 }; 86 this.datamodel.ajaxData = {}; 87 }, 88 89 format: function (datamodel) { 90 //处理datamodel生成viewModel的逻辑 91 return datamodel; 92 }, 93 94 ajaxLoading: function () { 95 this.notifyDataChanged(); 96 }, 97 98 ajaxSuc: function (data) { 99 this.datamodel.ajaxData = data;100 this.notifyDataChanged();101 }102 });103 104 var AjaxViewController = _.inherit(Dalmatian.ViewController, {105 _initialize: function ($super) {106 $super();107 //设置基本的属性108 this.view = new AjaxView();109 this.adapter = new AjaxAdapter();110 this.viewstatus = 'init';111 this.container = '#container';112 },113 114 //处理datamodel变化引起的dom改变115 render: function (data) {116 //这里用户明确知道自己有没有viewdata117 var viewdata = this.adapter.getViewModel();118 var wrapperSet = {119 loading: '.cui-error-tips',120 ajaxSuc: '.cui-error-tips'121 };122 //view具有唯一包裹器123 var root = this.view.root;124 var selector = wrapperSet[this.viewstatus];125 126 if (selector) {127 root = root.find(selector);128 }129 130 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel());131 132 root.html(this.view.html);133 134 },135 136 //显示后Ajax请求数据137 onViewAfterShow: function () {138 this._handleAjax();139 },140 141 _handleAjax: function (data) {142 this.setViewStatus('loading');143 this.adapter.ajaxLoading();144 getAjaxData($.proxy(function (data) {145 this.setViewStatus('ajaxSuc');146 this.adapter.ajaxSuc(data);147 }, this), data);148 },149 150 events: {151 'click .cui-btns-sure': function () {152 var data = this.$el.find('#ajax_data').val();153 data = eval('(' + data + ')');154 this._handleAjax(data);155 }156 }157 });158 159 var a = new AjaxViewController();160 a.show();161 162 </script>163 </body>164 </html>完成HTML
1 (function () { 2 var _ = window._; 3 if (ty
新闻热点
疑难解答
