fish视觉组件

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.$()