2011-08-05 140 views
5

在充分琢磨骨幹的過程中。是否有代表骨幹架構全部範圍的視覺資源或圖表?你會推薦任何其他資源?謝謝!Backbone.js如何工作?

+1

可能重複:http:// stackoverflow。com/questions/6659713/Understanding-the-internal-structural-dependencies-of-mvc-in-backbone-js – PhD

+1

歡迎查看我的演示文稿 - 它有非常簡單的圖解解釋骨幹網的架構。儘管我沒有在演示文稿中解釋路由器的任何內容,但這不應該成爲問題,因爲它是Backbone中最簡單的部分。 http://www.slideshare.net/ronreiter/writing-html5-web-apps-using-backbonejs-and-gae –

回答

12

看看@安東的回答這個問題:Understanding the internal structural dependencies of MVC in Backbone.js

你真的不需要與架構,花那麼多時間 - 它是可以被用來幫助放在一起使用簡單的面向對象的結構框架或基於事件的設計。你基本上只有4臺班(這麼說)

  1. 模型 - 你需要存儲/在一個寧靜的方式與服務器操作和同步後存儲實際數據(使用JSON/AJAX)
  2. 集合 - 幫助您存儲模型列表並使用精彩的underscore.js幫助您使用各種操作來迭代它,使您的生活變得更輕鬆
  3. 視圖 - 幫助分離關注點。您將渲染操作限制爲該類,並將其用作「控制器」 - 捕獲事件並在模型上執行操作。或者聽取模型或集合的事件,以便在底層模型更改時更新視圖。
  4. 路由器 - 基於URL片段,您可以選擇「路由」您的應用程序邏輯 - 大體上來說。根據你的url片段,你可以選擇調用哪些函數,以便根據你的邏輯有效地「路由」到正確的一組方法。

你遵循所有的OO設計實踐,你會幫助設計更好 - 基本上有助於組織你的代碼和分離他們的顧慮。試試這個:對於最簡單的hello world應用程序,繪製一個將hello-world的「presenation」與「存儲字符串」分開的UML類圖 - 您會驚訝於backbone如何幫助您在javascript中實現同樣的功能!

Backbone是jquery最好的朋友可以這麼說,所以你'組織'你的代碼並使用jquery來查詢DOM。查詢的風格與知識背景相關。假設以下多個div

<div class="helloClass"> 
<div class="innerHello"> Hello World 1</div> 
</div> 

<div class="helloClass"> 
<div class="innerHello"> Hello World 2</div> 
</div> 

<div class="helloClass"> 
<div class="innerHello"> Hello World 3</div> 
</div> 
... 

查詢這個使用jQuery會要求你無論是在存儲數據 - 自定義ID或存儲數據*取決於應用程序是如何設計的屬性。隨着骨幹網,您爲每個格視圖和你這樣的查詢視圖中的DIV工作:

做的
var text = $(this.el).find('.innerHello').text(); 

一個例子。使搜索DOM更快。你也可以做

var text = $('.innerHello', this.el).text(); 

希望這有助於澄清事情。查找上述鏈接的答案......這是一個很好的解釋。

對於剩下:http://documentcloud.github.com/backbone/

1

羅恩的圖表都很酷,我想添加的一系列圖表,你會發現this slides。從這張精確的幻燈片到結尾,非常完整,真實可視。

希望它有幫助!