出发请选择出发地到达请选择到达地查询

这里核心代码是：

showSearchBox: function () { 3 var scope = this; 4 if (!this.searchBox) { 5 this.searchBox = new UIScrollLayer({ 6 title: '请选择搜索条件', 7 html: searchBoxHtml, 8 events: { 9 'click .js-start': function () { 10 11 }, 12 'click .js-arrive': function () { 13 14 }, 15 'click .js_search_list': function () { 16 17 console.log('查询列表'); 18 } 19 } 20 }); 21 } 22 this.searchBox.show(); 23 },

于是当URL什么参数都没有的时候，就会弹出这个搜索框

这里也迎来了一个难点，因为城市列表事实上应该是一个独立的可访问的页面，但是这里是想用弹出层的方式调用他，所以我在APP层实现了一个方法可以用弹出层的方式调起一个独立的页面。

注意： 这里city城市列表未完全采用组件化的方式开发，有兴趣的朋友可以自己尝试着开发

这里有一个不同的地方是，因为我们点击查询的时候才会做实体数据更新，这里是单纯的做DOM操作了，这里不设置数据实体一个原因就是：

这个搜索弹出层是一个页面级DOM之外的部分，数据实体变化一般只应该影响Page级别的DOM，除非真的有两个页面级View会公用一个数据实体。

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(); }, 32 33 _initModule: function () { 34 this.dateModule = new DateModule({ 35 view: this, 36 selector: '.js_calendar_wrapper', 37 dateEntity: this.dateEntity 38 }); 39 40 }, 41 42 propertys: function ($super) { 43 $super(); ._initEntity(); 46 this._initModule(); .style = style; 49 this.template = layoutHtml; .urlData = { 53 start: {}, 54 end: {} 55 }; }, 59 60 initHeader: function (name) { 61 var title = '班次列表'; 62 this.header.set({ 63 view: this, 64 title: title, 65 back: function () { 66 console.log('回退'); 67 }, 68 right: [ 69 { 70 tagname: 'search-bar', 71 value: '搜索', 72 callback: function () { 73 console.log('弹出搜索框'); 74 this.showSearchBox(); 75 } 76 } 77 ] 78 }); 79 }, showSearchBox: function () { 83 var scope = this; 84 if (!this.searchBox) { 85 this.searchBox = new UIScrollLayer({ 86 title: '请选择搜索条件', 87 html: searchBoxHtml, 88 events: { 89 'click .js-start': function (e) { 90 scope._showCityView('start', $(e.currentTarget)); 91 }, 92 'click .js-arrive': function (e) { 93 scope._showCityView('end', $(e.currentTarget)); 94 }, 95 'click .js_search_list': function () { 96 var param = {}; (!scope.urlData.start.id) { 99 scope.showToast('请先选择出发城市'); 100 return; 101 } (!scope.urlData.end.id) { 104 scope.showToast('请先选择到达城市'); 105 return; 106 } param.startcityid = scope.urlData.start.id; 110 param.arrivalcityid = scope.urlData.end.id; 111 param.startdatetime = scope.dateEntity.getDate(); 112 param.startname = scope.urlData.start.name; 113 param.arrivename = scope.urlData.end.name; (scope.urlData.start.station) { 116 param.startstationid = scope.urlData.start.station 117 } (scope.urlData.end.station) { 120 param.arrivalstationid = end_station 121 } 122 123 scope.forward('list', param); 124 this.hide(); 125 } 126 } 127 }); 128 } 129 this.searchBox.show(); 130 }, 131 132 _showCityView: function (key, el) { 133 var scope = this; (key == 'end') { (!this.urlData.start.id) { 138 this.showToast('请先选择出发城市'); 139 return; 140 } 141 } .showPageView('city', { 144 flag: key, 145 startId: this.urlData.start.id, 146 type: this.urlData.start.type, 147 onCityItemClick: function (id, name, station, type) { 148 scope.urlData[key] = {}; 149 scope.urlData[key]['id'] = id; 150 scope.urlData[key]['type'] = type; 151 scope.urlData[key]['name'] = name; 152 if (station) scope.urlData[key]['name'] = station; 153 el.text(name); 154 scope.hidePageView(); 155 }, 156 onBackAction: function () { 157 scope.hidePageView(); 158 } 159 }); 160 }, 161 162 addEvent: function () { 163 this.on('onShow', function () { .dateModule.initDate(); (!_.getUrlParam().startcityid || !_.getUrlParam().arrivalcityid) { 169 this.showSearchBox(); 170 return; 171 } 172 173 }); 174 } 175 }); 176 177 });

搜索功能完成后，我们这里便可以进入真正的数据请求功能渲染列表了。

在实现数据请求之前，我按照日期模块的方式将下面三个模块的功能也一并完成了，这里唯一不同的是，这些模块的DOM已经存在，我们不需要渲染了，完成后的代码大概是这样的：