Backbone.js的工作原理圖？

Question

在充分激活骨干的過程中。 是否有任何可視資源或圖表代表骨干架構的全部范圍？ 你會推薦其他資源嗎？ 謝謝！

Answer 1

看看@ Anton對這個問題的回答： 了解Backbone.js中MVC的內部結構依賴性

你真的不需要花太多時間在架構上 - 它是一個框架，可以用來幫助使用簡單的OO結構或基於事件的設計組合在一起。 你基本上只有4套課（可以這么說）

1. 模型 - 存儲您需要以安靜的方式存儲/操作和與服務器同步的實際數據（使用JSON / ajax）
2. 收藏 - 幫助您存儲模型列表並使用精彩的underscore.js幫助使用各種操作迭代它以使您的生活更輕松
3. 觀點 - 幫助解決問題。 您將渲染操作限制為此類，並將其用作“控制器” - 捕獲事件並對模型執行操作。 或者監聽模型或集合的事件，以便在基礎模型更改時更新視圖。
4. 路由器 - 基於url片段，您可以選擇“路由”您的應用程序邏輯 - 松散地說。 根據您的url片段，您可以選擇要調用的函數，以便根據邏輯有效地“路由”到正確的方法集。

您遵循所有可以幫助設計的OO設計實踐 - 基本上有助於組織代碼並分離他們的關注點。 試試這個：對於最簡單的hello world應用程序，繪制一個UML類圖，將hello-world的“presenation”與“存儲字符串”分開 - 你會驚訝於骨干如何幫助你在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或將數據存儲在custom data- *屬性中。 使用Backbone，您可以為每個div創建一個View，並在視圖中處理您在此處查詢的div：

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

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

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

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

其余的： http ： //documentcloud.github.com/backbone/

Answer 2

Ron's Diagrams很酷，我想添加你在這張幻燈片中找到的圖表集。 從這個精確的幻燈片到它的結尾，非常完整和真實的視覺。

希望能幫助到你！