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

1 addEvent: function () { 2 this.on('onShow', function () { .dateModule.initDate(); 5 6 }); 7 }

于是，整个界面变成了这个样子：

这里是对应的日历工具模板文件tpl.calendar.html：

前一天后一天

搜索工具栏的实现

我们现在的页面，就算不传任何URL参数，已经能渲染出部分页面了，但是下面出发站汽车等业务数据必须等待班次列表数据请求结束才能替换数据，但是这些数据如果没有出发城市和到达城市是不能发起请求的，所以这里先实现搜索工具栏功能：

在出发城市或者到达城市不存在的话便弹出搜索工具栏，引导用户选择城市，这里新增弹出层需要在主页面控制器（检测主控制器）中使用一个UI组件：

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 'text!ListPath/tpl.search.box.html', 12 'UIScrollLayer' 13 ], function ( 14 AbstractView, 15 style, 16 17 DateEntity, 18 19 DateModule, 20 21 layoutHtml, 22 searchBoxHtml, 23 UIScrollLayer 24 ) { 25 return _.inherit(AbstractView, { 26 27 _initEntity: function () { 28 this.dateEntity = new DateEntity(); 29 }, 30 31 _initModule: function () { 32 this.dateModule = new DateModule({ 33 view: this, 34 selector: '.js_calendar_wrapper', 35 dateEntity: this.dateEntity 36 }); 37 }, 38 39 propertys: function ($super) { 40 $super(); ._initEntity(); 43 this._initModule(); .style = style; 46 this.template = layoutHtml; 47 }, 48 49 initHeader: function (name) { 50 var title = '班次列表'; 51 this.header.set({ 52 view: this, 53 title: title, 54 back: function () { 55 console.log('回退'); 56 }, 57 right: [ 58 { 59 tagname: 'search-bar', 60 value: '搜索', 61 callback: function () { 62 console.log('弹出搜索框'); 63 this.showSearchBox(); 64 } 65 } 66 ] 67 }); 68 }, showSearchBox: function () { 74 var scope = this; 75 if (!this.searchBox) { 76 this.searchBox = new UIScrollLayer({ 77 title: '请选择搜索条件', 78 html: searchBoxHtml, 79 events: { 80 'click .js-start': function () { 81 82 }, 83 'click .js-arrive': function () { 84 85 }, 86 'click .js_search_list': function () { 87 88 console.log('查询列表'); 89 } 90 } 91 }); 92 } 93 this.searchBox.show(); 94 }, 95 96 addEvent: function () { 97 this.on('onShow', function () { .dateModule.initDate(); (!_.getUrlParam().startcityid || !_.getUrlParam().arrivalcityid) { 103 this.showSearchBox(); 104 return; 105 } }); 109 } 110 }); 111 112 });

list.js

对应搜索弹出层html模板：