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/