Dalmatian.ViewController = _.inherit({

   // @description 构造函数入口

   initialize: function (options) {

     this._initialize();

     this.handleOptions(options);

     //处理datamodel

     this._handleDataModel();

     this.create();

   },

   // @description 默认属性设置点，根据该函数，我可以知道该类具有哪些this属性

   _initialize: function () {

     //用户设置的容器选择器，或者dom结构

     this.containe;

     //根元素

     this.$el;

     //默认容器

     this.root = $('body');

     //一定会出现

     this.view;

     //可能会出现

     this.adapter;

     //初始化的时候便需要设置view的状态，否则会渲染失败，这里给一个默认值

     this.viewstatus = 'init';

   },

   setViewStatus: function (status) {

     this.viewstatus = status;

   },

   // @description 操作构造函数传入操作

   handleOptions: function (options) {

     if (!options) return;

     this._verify(options);

     // @description 从形参中获取key和value绑定在this上

     if (_.isObject(options)) _.extend(this, options);

   },

   //处理dataAdpter中的datamodel，为其注入view的默认容器数据

   _handleDataModel: function () {

     //不存在就不予理睬

     if (!this.adapter) return;

     this.adapter.datamodel.wrapperSet = this.view.wrapperSet;

     this.adapter.registerObserver(this);

   },

   // @description 验证参数

   _verify: function (options) {

     //这个underscore方法新框架在报错

     //    if (!_.property('view')(options) && (!this.view)) throw Error('view必须在实例化的时候传入ViewController');

     if (options.view && (!this.view)) throw Error('view必须在实例化的时候传入ViewController');

   },

   // @description 当数据发生变化时调用onViewUpdate，如果onViewUpdate方法不存在的话，直接调用render方法重绘

   update: function (data) {

     //这样虽然减少回流，但会隐藏页面跳动

     //    _.callmethod(this.hide, this);

     if (!_.callmethod(this.onViewUpdate, this, [data])) {

       this.render();

     }

     //    _.callmethod(this.show, this);

   },

   /**

   * @override

   *

   */

   render: function () {

     // @notation  这个方法需要被复写

     // var data = this.adapter.format(this.origindata);

     this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel());

   },

   // @description 返回基于当前view下的某节点

   find: function (selector) {

     if (!this.$el) return null;

     return this.$el.find(selector);

   },

   _create: function () {

     this.render();

     //render 结束后构建好根元素dom结构

     this.$el = $(this.view.html);

   },

   create: function () {

     //l_wang 这段代码没有看懂************

     //    var $element = this.find(this.view.viewid);

     //    if ($element) return _.callmethod(this.recreate, this);

     //l_wang 这段代码没有看懂************

     // @notation 在create方法调用前后设置onViewBeforeCreate和onViewAfterCreate两个回调

     _.wrapmethod(this._create, 'onViewBeforeCreate', 'onViewAfterCreate', this);

   },

   /**

   * @description 如果进入create判断是否需要update一下页面，sync view和viewcontroller的数据

   */

   _recreate: function () {

     this.update();

   },

   recreate: function () {

     _.wrapmethod(this._recreate, 'onViewBeforeRecreate', 'onViewAfterRecreate', this);

   },

   //事件注册点

   bindEvents: function (events) {

     if (!(events || (events = _.result(this, 'events')))) return this;

     this.unBindEvents();

     // @description 解析event参数的正则

     var delegateEventSplitter = /^(\S+)\s*(.*)$/;

     var key, method, match, eventName, selector;

     //注意，此处做简单的字符串数据解析即可，不做实际业务

     for (key in events) {

       method = events[key];

       if (!_.isFunction(method)) method = this[events[key]];

       if (!method) continue;

       match = key.match(delegateEventSplitter);

       eventName = match[1], selector = match[2];

       method = _.bind(method, this);

       eventName += '.delegateEvents' + this.view.viewid;

       if (selector === '') {

         this.$el.on(eventName, method);

       } else {

         this.$el.on(eventName, selector, method);

       }

     }

     return this;

   },

   //取消所有事件

   unBindEvents: function () {

     this.$el.off('.delegateEvents' + this.view.viewid);

     return this;

   },

   _show: function () {

     this.bindEvents();

     this.root = $(this.container);

     this.root.append(this.$el);

     this.$el.show();

   },

   show: function () {

     _.wrapmethod(this._show, 'onViewBeforeShow', 'onViewAfterShow', this);

   },

   _hide: function () {

     this.forze();

     this.$el.hide();

   },

   hide: function () {

     _.wrapmethod(this._hide, 'onViewBeforeHide', 'onViewAfterHide', this);

   },

   _forze: function () {

     this.unBindEvents();

   },

   forze: function () {

     _.wrapmethod(this._forze, 'onViewBeforeForzen', 'onViewAfterForzen', this);

   },

   _destory: function () {

     this.unBindEvents();

     this.$el.remove();

     //    delete this;

   },

   destory: function () {

     _.wrapmethod(this._destory, 'onViewBeforeDestory', 'onViewAfterDestory', this);

   }

 });

 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ToDoList</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">

   <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css">

   <link href="../style/main.css" rel="stylesheet" type="text/css" />

   <style type="text/css">

     .cui-alert { width: auto; position: static; }

     .txt { border: #cfcfcf 1px solid; margin: 10px 0; width: 80%; }

     ul, li { padding: 0; margin: 0; }

     .cui_calendar, .cui_week { list-style: none; }

     .cui_calendar li, .cui_week li { float: left; width: 14%; overflow: hidden; padding: 4px 0; text-align: center; }

   </style>

 </head>

 <body>

   <article id="container">

   </article>

   <script type="text/underscore-template" id="template-ajax-init">

       <div class="cui-alert" >

         <div class="cui-pop-box">

           <div class="cui-hd">

             <%=title%>

           </div>

           <div class="cui-bd">

             <div class="cui-error-tips">

             </div>

             <div class="cui-roller-btns" style="padding: 4px; "><input type="text" placeholder="请设置数据 [{ title: ''},{ title: ''}]" style="margin: 2px; width: 100%; " id="ajax_data" class="txt"></div>

             <div class="cui-roller-btns">

               <div class="cui-flexbd cui-btns-sure"><%=confirm%></div>

             </div>

           </div>

         </div>

       </div>

   </script>

   <script type="text/underscore-template" id="template-ajax-suc">

     <ul>

     <% console.log(ajaxData) %>

     <%for(var i = 0; i < ajaxData.length; i++) { %>

       <li><%=ajaxData[i].title %></li>

     <% } %>

   </ul>

   </script>

   <script type="text/underscore-template" id="template-ajax-loading">

     loading....

   </script>

   <script type="text/javascript" src="../../vendor/underscore-min.js"></script>

   <script type="text/javascript" src="../../vendor/zepto.min.js"></script>

   <script src="../../src/underscore.extend.js" type="text/javascript"></script>

   <script src="../../src/util.js" type="text/javascript"></script>

   <script src="../../src/message-center-wl.js" type="text/javascript"></script>

   <script src="../../src/mvc-wl.js" type="text/javascript"></script>

   <script type="text/javascript">

     //模拟Ajax请求

     function getAjaxData(callback, data) {

       setTimeout(function () {

         if (!data) {

           data = [];

           for (var i = 0; i < 5; i++) {

             data.push({ title: '我是标题_' + i });

           }

         }

         callback(data);

       }, 1000);

     }

     var AjaxView = _.inherit(Dalmatian.View, {

       _initialize: function ($super) {

         //设置默认属性

         $super();

         this.templateSet = {

           init: $('#template-ajax-init').html(),

           loading: $('#template-ajax-loading').html(),

           ajaxSuc: $('#template-ajax-suc').html()

         };

         this.wrapperSet = {

           loading: '.cui-error-tips',

           ajaxSuc: '.cui-error-tips'

         };

       }

     });

     var AjaxAdapter = _.inherit(Dalmatian.Adapter, {

       _initialize: function ($super) {

         $super();

         this.datamodel = {

           title: '标题',

           confirm: '刷新数据'

         };

         this.datamodel.ajaxData = {};

       },

       format: function (datamodel) {

         //处理datamodel生成viewModel的逻辑

         return datamodel;

       },

       ajaxLoading: function () {

         this.setStatus('loading');

         this.notifyDataChanged();

       },

       ajaxSuc: function (data) {

         this.datamodel.ajaxData = data;

         this.setStatus('ajaxSuc');

         this.notifyDataChanged();

       }

     });

     var AjaxViewController = _.inherit(Dalmatian.ViewController, {

       _initialize: function ($super) {

         $super();

         //设置基本的属性

         this.view = new AjaxView();

         this.adapter = new AjaxAdapter();

         this.viewstatus = 'init';

         this.container = '#container';

       },

       //显示后Ajax请求数据

       onViewAfterShow: function () {

         this._handleAjax();

       },

       _handleAjax: function (data) {

         this.adapter.ajaxLoading();

         getAjaxData($.proxy(function (data) {

           this.adapter.ajaxSuc(data);

         }, this), data);

       },

       events: {

         'click .cui-btns-sure': function () {

           var data = this.$el.find('#ajax_data').val();

           data = eval('(' + data + ')');

           this._handleAjax(data);

         }

       }

     });

     var a = new AjaxViewController();

     a.show();

   </script>

 </body>

 </html>