Kissy mvc

  • View
    2.280

  • Download
    1

Embed Size (px)

DESCRIPTION

kissy's backbone style mvc

Text of Kissy mvc

KISSY MVC

KISSY MVC Overviewyiminghe@gmail.com

2011-11-17 Draftmvc

KISSY.use (mvc,function(S,mvc){mvc.View => mvc.Model => mvc.Collection => mvc.Router => mvc.sync => }) Smart ModelFlexible data transfersyncparseurlurlRoot

Smart Model

/notes/{noteId}Smart ModelEvent-Driven*ChangeBeforeXChangeAfterXChange

Smart Model Code

Smart ModelServer-TransparentLoadSavedestroy

Smart Model

Smart CollectionFlexible data transfersyncparse

Smart Collection

Smart Collectionmodels managementsortgetByIdgetByCidAddRemveS.eachS.filter

Smart Collection

Smart CollectionEvent-DrivenBubbled *ChangeaddremoveafterModelsChange( .load() )

Smart CollectionServer-tranparentloadcreate

Smart Collection

Dumb ViewDumb View

Controllable View With DOM EventControllable ViewDelegate EventsCreate Container

model view view view18Controllable View

Powerful routerurl hash dispatched to function with path param and query param (intelligent dispatch)

/edit/:id -> fn/edit/99?q=1 => fn(pathParam,queryParam)pathParam => {id:99}queryParam => {q:1}

/new/*path/new/kissy-mvc/is-good => fn(pathParam)pathParam => {path:kissy-mvc/is-good}

/*path

Route url20Graceful html5 supportPromotion @ Html5 Historyhttp://xx.com/#new=>http://xx.com/newDegradation @ html < 5http://xx.com/new=>http://xx.com/#newRouter EventsAlso some events

Powerful Router

23Global syncmvc.sync

Load notes list => /notes/?_method=readUpdate note => /notes/noteId?_method=updateDelete note => /notes/noteId?_method=deleteCreate note => /notes/?_method=createLoad single note => /notes/noteId?_method=read

ExampleKISSY Notebook

list

NotesView/NoteView

SearchView

EditView

Router

SyncUsing localStorage

ReferAPI:http://docs.kissyui.com/docs/html/api/component/mvc/index.html

Demo:http://docs.kissyui.com/kissy/src/mvc/demo.html