KISSY Component Model

yiminghe@gmail.com

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: