FIRES:自定义事件

组件向外发出的自定义事件

给HelloWorld的show,hide方法中添加自定义事件show和hide

//事件的定义,提高代码阅读
HelloWorld.FIRES = {
    show:'show',
    hide:'hide'
}
HelloWorld.METHOD = {
    show:function () {
        this.get('el').fadeIn();
        this.fire(HelloWorld.FIRES.show,{data:'showdata'});
    },
    hide:function () {
        this.get('el').fadeOut();
        this.fire(HelloWorld.FIRES.hide,{data:'hidedata'});
    }
};

html代码:

<div id="container1">
    <button id="btnhide" class="btn btn-shopping-cart btn-size30">
        hide
    </button>
    <button id="btnshow" class="btn btn-taobao btn-size30">
        show
    </button>
    <div id="helloworld1">
        <span>Hello <span id="spanName">World</span></span>
    </div>
</div>

js代码:

KISSY.use('helloworld',function(S,HelloWorld){
    var helloworld = new HelloWorld({tmpl:'#helloworld1'});
    helloworld.on('show',function (ev) {
        top.console.log('自定义事件show触发,数据为'+ev.data);
    });
    helloworld.on('hide',function (ev) {
        top.console.log('自定义事件hide触发,数据为'+ev.data);
    });
    S.one('#btnshow').on('click',function (e) {
        helloworld.show();
    });
    S.one('#btnhide').on('click',function (e) {
        helloworld.hide();
    });
});

demo: