0x00 视觉组件中的setView
var parentView = new ParentView().render(); // 1)setViews // 父视图的body节点插入ChildView1和ChildView2两个子视图 parentView.setViews({'.body': [new ChildView1(), new ChildView2()]}); // 父视图的body节点渲染ChildView1和ChildView2两个子视图 parentView.renderViews('.body');
当使用以上代码渲染时，会出现这种情况
可以看到多输出了一个child2，首先setView执行childView1（）时只有一个‘.body’，然后就找到这个body并插入代码，然后执行childView2（）时发现了两个'.body'，于是便在两个地方各自插入了一次代码
0x01 视觉组件中的setView
然后接着进行渲染
// 父视图渲染 var parentView = new ParentView().render(); // 1)setViews // 父视图的body节点插入ChildView1和ChildView2两个子视图 parentView.setViews({'.body': [new ChildView1(), new ChildView2()]}); // 父视图的body节点渲染ChildView1和ChildView2两个子视图 parentView.renderViews('.body'); // 2)setView // OtherView视图插入到父视图body节点(ChildView1和ChildView2被覆盖) parentView.setView('.body', new OtherView()); // 别忘了插入了视图后还需渲染视图 parentView.renderViews('.body');可以看到这里覆盖了之前的childView，但具体怎么覆盖的这里没有搞懂，等我搞懂了再修改此处
后日补充：此处的覆盖应该是根据插入的子视图数量来覆盖，比如这里先插入了child1和child2，所以是插入了两个子视图，然后又setView插入otherChild，因为之前插入了两个子视图，这里只插入一个，所以第一个插入的child1被删掉了（保证视图数量）
0x02 视图通信
视图之间通信一般不通过父视图传递参数来实现，因为这种方法耦合性较高。一般通过以下这种方法来实现
var ChildOneView = fish.View.extend({ el: false, template: fish.compile('<p>{{name}}</p>'), events: { 'click': '_onClick' }, serialize: { name: 'ChildOne' }, _onClick: function() { // 触发ChildTwoView的ChildTwoEvent方法 this.trigger('ChildTwoEvent',{message:'ChildOneView say goodbye to ChildTwoView'}) }, ChildOneEvent: function(data) { console.log(data.message); } }); var ChildTwoView = fish.View.extend({ el: false, template: fish.compile('<p>{{name}}</p>'), events: { 'click': '_onClick' }, serialize: { name: 'ChildTwo' }, _onClick: function() { // 触发ChildOneView的ChildOneEvent方法 this.trigger('ChildOneEvent', {message:'ChildTwoView say hello to ChildOneView'}) }, ChildTwoEvent: function(data) { console.log(data.message); } }); var template = '<div><p>{{name}}</p><div class="body"></div></div>'; var ParentView = fish.View.extend({ el: '#app-1', template: fish.compile('<div><p>{{name}}</p><div class="body"></div></div>'), serialize: { name: 'Parent' }, initialize: function() { this.childOne = new ChildOneView(); this.childTwo = new ChildTwoView(); // 将ChildOneView和ChildTwoView设为子视图 this.setViews({ '.body': [this.childOne, this.childTwo] }); // 在父视图内监听子视图通信 this.childOne.listenTo(this.childTwo, 'ChildOneEvent', this.childOne.ChildOneEvent); //第一个参数为other对象，第二个参数为other对象触发的事件，第三个参数为回调函数 this.childTwo.listenTo(this.childOne, 'ChildTwoEvent', this.childTwo.ChildTwoEvent); } }); var parentView = new ParentView().render();0x03视图切换
注意这里serialize的用法
var ChildView = fish.View.extend({ el: false, template: fish.compile('<p>{{title}}</p>'), serialize: function() { return { title: 'Child ' + this.options.index }; } }); // 定义三个子视图 var childViews = [new ChildView({ index: 1 }), new ChildView({ index: 2 }), new ChildView({ index: 3 })]; //定义父视图 var ParentView = fish.View.extend({ el: '#app-1', template: fish.compile('<div><p>{{name}}</p><div class="body"></div></div>'), serialize: { name: 'Parent' }, initialize: function() { this.setViews({ '.body': childViews }); } }); // 首先全部展示父视图与三个子视图 var parentView = new ParentView().render(); // 显示第一个子视图，隐藏其余子视图 parentView.navigateView('.body', childViews[0]); // 显示第二个子视图，隐藏其余子视图 parentView.navigateView('.body', childViews[1]); // 显示第三个子视图，隐藏其余子视图 parentView.navigateView('.body', childViews[2]);0x04 弹出视图
弹出视图函数
define([], function() { var template = '<div class="ui-dialog dialog-md">' + '<div class="modal-header"><h4 class="modal-title">{{title}}</h4></div>' + '<div class="modal-body">{{{content}}}</div>' + '</div>' var PopView = fish.View.extend({ el: false, template: fish.compile(template), events: { "click #close": "close" }, serialize: function() { return { title: this.options.title, content: '<p>do something here...</p><button class="btn btn-default" id="close">close</button>' }; }, initialize: function() { }, afterRender: function() { }, close: function() { this.trigger("close"); //弹出的视图实例会注入popup property，用于视图想自己关闭自己 this.popup.close(); }, cleanup: function() { } }); return PopView; });主页面直接调用
// 调用,假设`index.js`与`popView.js`为平级关系 fish.popupView({ url: './popView.js', width: "60%", viewOption: {title: 'I am title'}, //传参 close: function(data) { // data 为 popView.js 中 this.popup.close的参数 } });另外注意，视图内不能使用全局$()，只能使用this.$()
