【组件化开发】前端进阶篇之如何编写可维护可升级的代码 - 叶小钗(14)_H5之家

1 this.dateEntity.subscribe('init', this.render, this); 2 this.dateEntity.subscribe(this.render, this);

render方法继承至基类，使用template与数据生成html，其中数据产生必须重写父类一个方法：

1 getViewModel: function () { 2 var data = this.dateEntity.get(); 3 data.formatStr = this.dateEntity.getDateStr(); 4 data.canPreDay = this.dateEntity.canPreDay(); 5 return data; 6 },

因为这里的日历数据，默认取当前时间，但是url参数可能传递日期参数，所以定义了一个数据初始化方法：

1 initDate: function () { 2 var t = new Date().getTime(); (_.getUrlParam().startdatetime) t = _.getUrlParam().startdatetime; 6 this.dateEntity.initData({ 7 date: t 8 }); 9 },

该方法在主页面渲染结束后会第一时间调用，这个时候日历工具栏便渲染出来，其中日历组件的使用便不予理睬了，主控制器的代码改变如下：

1 define([ 2 'AbstractView', 3 'text!ListPath/list.css', 4 5 'ListPath/en.date', 'ListPath/mod.date', 9 10 'text!ListPath/tpl.layout.html' 11 ], function ( 12 AbstractView, 13 style, 14 15 DateEntity, 16 17 DateModule, 18 19 layoutHtml 20 ) { 21 return _.inherit(AbstractView, { 22 23 _initEntity: function () { 24 this.dateEntity = new DateEntity(); 25 }, 26 27 _initModule: function () { 28 this.dateModule = new DateModule({ 29 view: this, 30 selector: '.js_calendar_wrapper', 31 dateEntity: this.dateEntity 32 }); 33 }, 34 35 propertys: function ($super) { 36 $super(); ._initEntity(); 39 this._initModule(); .style = style; 42 this.template = layoutHtml; 43 }, 44 45 initHeader: function (name) { 46 var title = '班次列表'; 47 this.header.set({ 48 view: this, 49 title: title 50 }); 51 }, 52 53 addEvent: function () { 54 this.on('onShow', function () { .dateModule.initDate(); }); 61 } 62 }); 63 64 });

list.js

1 _initEntity: function () { 2 this.dateEntity = new DateEntity(); 3 }, 4 5 _initModule: function () { 6 this.dateModule = new DateModule({ 7 view: this, 8 selector: '.js_calendar_wrapper', 9 dateEntity: this.dateEntity 10 }); 11 },