kissy component model

Click here to load reader

Post on 12-Sep-2014

1.197 views

Category:

Technology

10 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • KISSY Component Model

    [email protected]

  • 1

    Suggest

  • //

    var defaultConfig={};

    function Suggest(config){

    S.mix(config,defaultConfig,false);

    //

    }

    //

    S.augment(Suggest,EventTarget,{});

  • 1

  • 2

    Switchable

  • ------------switchable.js

    //

    function Switchable(){}

    ------------switchable-plugin.js

    //

    function SwitchPlugin(){}

    ------------widge-tab.js

    //

    function Tab(){}

    S.extend(Tab,Switchable);

  • 2

    .

    .

    .

  • 3

    Inspired by yui3 ,use base/attribute

  • function Component(){

    this.on("afterXChange",this.afterXChange,this);

    }

    Component.ATTRS={

    x:{

    getter:function(){}

    }

    };

    S.extend(Component,S.Base,{

    afterXChange:function(){}

    });

    //----------------- use

    new Component().set("x",1);

    new Component().get("x");

  • 3

    dom

    Refer:http://goo.gl/if8k9

  • 4

    Overlay using UIBase

  • var Component=UIBase.create(Parent,['MixComponent'],{

    initializer:function(){},

    _uiSetX:function(){},

    renderUI:function(){},

    bindUI:function(){},

    //syncUI:function(){}

    destructor:function(){}

    },{

    ATTRS:{

    x:{}

    },

    HTML_PARSER:{

    yEl:".cls"

    }

    });

    html

  • 4

    mixin

    Refer: http://goo.gl/sgvXP

  • 5

    menu,menubutton

    Component , MVC

  • ModelControl ModelControl=UIBase.create([UIBase.Box],{

    renderUI:function(){//viewview},

    bindUI:function(){//dom},

    destructor:function(){//}

    },{

    ATTRS:{

    view://.DefaultRender

    children://

    parent://

    }

    })

  • Render

    var Render =

    UIBase.create([UIBase.Box.Render], {}, {

    ATTRS:{

    // maskup

    srcNode:{},

    // CSS class

    prefixCls:{ value: },

    //

    disabled:{ value:false}

    }

    });

  • //----------------- render.js

    var ComponentRender=UIBase.create(Component.Render,[...],{

    renderUI:function(){},//

    },{

    HTML_PARSER:{ yEl:function(){} } //markup

    });

    //----------------- modelcontrol.js

    var Component=UIBase.create(Component.ModelControl,[...],{

    bindUI:function(){},

    _handleClick:function(){},//override

    _uiSetX:function(){// view}

    },{

    {

    ATTRS:{x:{}},

    DefaultRender:ComponentRender

    }

    });

  • var comp=new Component({});//

    comp.addChild(new SubComponent({}))//

    comp.render(); //

  • 5

    UIBase MVC

    Render

    ModelControl: