Kissy mvc
Upcoming SlideShare
Loading in...5
×
 

Kissy mvc

on

  • 2,239 views

kissy's backbone style mvc

kissy's backbone style mvc

Statistics

Views

Total Views
2,239
Slideshare-icon Views on SlideShare
2,223
Embed Views
16

Actions

Likes
2
Downloads
24
Comments
0

1 Embed 16

http://fenxiang.taobao.net 16

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Kissy mvc Kissy mvc Presentation Transcript

    • KISSY MVC Overview yiminghe@gmail.com 2011-11-17 Draft
    • • mvc 模块• KISSY.use (“mvc”,function(S,mvc){ – mvc.View => 视图 – mvc.Model => 模型 – mvc.Collection => 集合 – mvc.Router => 路由 – mvc.sync => 默认系统同步• })
    • Smart Model• Flexible data transfer – sync – parse – url – urlRoot
    • Smart Model默认服务地址:/notes/{noteId}
    • Smart Model• Event-Driven – *Change – BeforeXChange – AfterXChange
    • Smart Model Code
    • Smart Model• Server-Transparent – Load – Save – destroy
    • Smart Model
    • Smart Collection• Flexible data transfer – sync – parse
    • Smart Collection
    • Smart Collection• models management – sort – getById – getByCid – Add – Remve – S.each – S.filter
    • Smart Collection
    • Smart Collection• Event-Driven – Bubbled *Change – add – remove – afterModelsChange • ( .load() )
    • Smart Collection• Server-tranparent – load – create
    • Smart Collection
    • Dumb View
    • Dumb ViewControllable View With DOM Event
    • Controllable View• Delegate Events• Create Container bookmark? router model view !bookmark model view ?
    • Controllable View
    • Powerful router• url 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”
    • Graceful html5 support• Promotion @ Html5 History – http://xx.com/#new – => – http://xx.com/new• Degradation @ html < 5 – http://xx.com/new – => – http://xx.com/#new
    • Router Events• Also some events hashchange route model view
    • Powerful Router
    • Global sync• mvc.sync – Load notes list => /notes/?_method=read – Update note => /notes/noteId?_method=update – Delete note => /notes/noteId?_method=delete – Create note => /notes/?_method=create – Load single note => /notes/noteId?_method=read
    • Example• KISSY Notebook
    • list
    • NotesView/NoteView
    • SearchView
    • EditView
    • Router
    • Sync• Using localStorage
    • ReferAPI:http://docs.kissyui.com/docs/html/api/component/mvc/index.htmlDemo:http://docs.kissyui.com/kissy/src/mvc/demo.html