Todo&Rocket

Todo是怎麼實現的？

前面兩篇博客分別介紹了MVC和Backbone.js的邏輯，可是實戰獲真知，在來一篇來顯示下Todo是怎麼經過Backbone.js鏈接起來的。

忽略掉全部的代碼，咱們只是打開todos.js。

先從成天上看，整個代碼中有如下幾個類，

Model:Todo

Collection: TodoList

View: TodoView, AppView.

頁面中還有一個比較奇怪的符號，你也許須要注意，

看到這裏，咱們大概懂了這些代碼是來作什麼的了，下面就能夠去細看各個類中具體作了哪些工做，從上篇博客中咱們知道，Backbone.js也是用事件來驅動的，因此咱們直接去看兩個View類中的事件處理函數，

AppView:

 

第一個事件是處理了輸入框中的回車事件，第二個函數是處理了清楚全部Todo事件，第三個函數是處理了選擇全部的Todo的事件。

 

 

在轉向另一個TodoView，咱們能夠看到events中分別註冊了選中單選框事件，編輯，刪除，回車後完成編輯，中止編輯事件。

如今咱們能夠將目光轉向Model了，Model十分簡單，只有一個保存數據到localstorage的操做。

回想咱們對Backbone.js的介紹，Backbone.js是怎麼鏈接起來的呢？View來處理對事件的相應並把數據傳送給Model，Model處理完成後去經過View去調用它的render函數來渲染對應的元素。這下整個頁面的邏輯就豁然開朗了，前面還提到了模板，模板是來作什麼呢？這裏的模板和Asp.net的模板有幾分相似，不過這裏的模板看上去更加小巧下，他只是頁面上一個很小的元素。看起來很神奇吧。

 

ROCKET框架學習

Rocket是一個基於Backbone.js的webapp開發框架，在他的介紹文檔中總結了Rocket的一系列優勢：

化繁爲簡： 分而治之的控制模型，提供一種MVC分解模型，將複雜應用邏輯分解成樹狀控制結構，每一個控制節點粒度（代碼規模）適中。

並行開發：知足並行開發需求，使SPA程序多人合做開發成爲可能。

有章可循：支持一系列的規範和流程，使開發更加順手，利於功能模塊的複用和後期維護。

快速開發：基於框架進行webapp開發，節省重複造輪子的時間，豐富的腳手架幫助工程師迅速搭建webapp產品。

既然Rocket有這麼炫目的優勢，咱們倒真有必要去看下這個東西究竟是什麼樣子。打開HelloRocket的頁面，咱們的第一反應是這個是用來作網頁PPT的那貨吧。仍是先不要關心細節而是打開它主要js代碼的實現，咱們看到咱們熟悉的Backbone.js的身影。還記得前一篇博客介紹的麼？Backbone.js有兩套系統，一個是Model， View，你能夠在Todo中看到他們大放異彩，另一套是router, history，後者可要在Rocket中大顯身手了。Rocket對URL上的頁面連接進行了封裝，並加入一些絢麗的動畫效果，因而你就看到HelloRocket的Slide效果了。

 -----------------------------------

 Xu Wang

 Tsinghua, School of Software

 Email:darenwang11@gmail.com

 QQ:2290826962