前言
之前尝试性的读了下backbone的源码，对继承、事件、view一块还比较熟悉，看下去比较顺畅，但是在model collection方面就很不顺利
究其原因还是没有使用过，不够熟悉，以码读码，脱离了业务逻辑的代码毫无意义，所以今天我们先来做一个例子吧，然后再根据例子学习
今天来一段官网以外的代码，本来这里想抄一个代码来着，但是这样的话好像意义就不大了，于是自己重新写一个例子吧
注意这个例子只是简单例子，各位不要当真，而且代码是今天下午写的，有BUG不要骂我，然后放到IIS环境下才有数据
下载源码：02backbone.zip
单页应用实例
以博客园为例，我们一起做一个单页，提供list和detail两个页面，并且为list提供分页和简单筛选功能来巩固我们的backbone学习
文件结构
首先为了简单起见，我们这里目录暂时如下：
其中css样式是上次做单页应用研究剩下的，这次直接拿来用吧
数据源
然后，我们来简单看看我们博客园的数据源返回的数据：
很遗憾博客园暂时只提供了xml的返回格式，其中我自己做了json的解析，其实就算我自己不做解析，也可以通过model的parse做解析
但是我没有那么蛋疼，这里还是使用后台方法解析吧
Model/Collection
有了数据源，我们就需要对其创建数据模型了，这里可以与他统一反正数据model会自己对应
我们知道Model可以设置URL，自己从服务器获取数据（只不过必须是rest请求），我们这里来试试
1 //博客模型
2 var PostModel = Backbone.Model.extend({
3
4 });
5
6 //模型集合
7 var PostList = Backbone.Collection.extend({
8 model: PostModel
9 });
10 var curpage = 1;
11 var pageSize = 10;
12 var list = new PostList();
13 list.url = 'Handler.ashx?url=http://wcf.open.cnblogs.com/blog/sitehome/paged/' + curpage + '/' + pageSize;
14 list.fetch();
我们这里事实上只需要获取数据即可，如此变会发起一个请求，数据返回与上述截图一致
有了数据我们就需要根据数据对model进行填充，一次实例化model加入collection
我们这里使用parse对返回数据进行处理，于是他自己就将model填充到model里面去了
parse: function (data) {
// 'data' contains the raw JSON object
return (data && data.feed && data.feed.entry) || {}
}
list.fetch({
success: function () {
var s = '';
}
});
需要注意一点是这里是异步的，所以不要傻傻的马上想在后面操作数据
视图-View
现在数据模型与集合都有了，我们需要一个承载他的页面，于是我们先随便搞下将数据显示出来：
① 定义模板
1 <script type="text/template" id="item-template">
2 <li class="arr_r orderItem" data-id="<%=id %>">
3 <article class="blog_item">
4 <h3>
5 <a href="<%=link.href %>" target="_blank">
6 <%=title.value || '无题' %></a>
7 </h3>
8 <div class="author pro_list_rank">
9 <%if(author.avatar){ %>
10 <a href="<%=author.uri %>" target="_blank">
11 <img src="<%=author.avatar %>">
12 </a>
13 <%} %>
14 <%=summary.value %>
15 </div>
16 <div class="item_footer">
17 <a href="<%=author.uri %>" class="lightblue">Scut</a>
18 <%=published %>
19 <a href="<%=link.href %>" title="2013-08-21 15:21" class="gray">评论(<%=comments %>)</a>
20 <a href="<%=link.href %>" class="gray">阅读(<%=views %>)</a> <span class="price1">推荐(<%=diggs %>)</span></div>
21 </article>
22 </li>
23 </script>
这是我们之前使用过的数据模板，这里直接搞过来使用了
② 定义view
并在集合数据加载结束调用render方法
1 var View = Backbone.View.extend({
2 template: _.template($('#item-template').html()),
3 initialize: function () {
4 var scope = this;
5 var curpage = 1;
6 var pageSize = 10;
7 this.list = new PostList();
8 this.list.url = 'Handler.ashx?url=http://wcf.open.cnblogs.com/blog/sitehome/paged/' + curpage + '/' + pageSize;
9 this.list.fetch({
10 success: function () {
11 scope.render();
12 }
13 });
14 this.wrapper = $('#lstbox');
15 },
16 render: function () {
17 var models = this.list.models;
18 var html = '';
19 for (var i = 0, len = models.length; i < len; i++) {
20 html += this.template(models[i].toJSON());
21
22 }
23 this.wrapper.html(html);
24 var s = '';
25 }
26 });
③ 实例化view
var view = new View();
于是我们的view就出来了：
附上完整html代码：
完整Html代码
到现在为止，我们只是简单将视图展示了出来，现在我们来多用一点集合与模型的操作，深入之前的学习
操作集合/模型
这里又有个比较遗憾的地方就是，我们并不需要写数据到服务器，我这里也不准备调用写的接口，所以model又被边缘化了......
集合排序
我们这里对下面的几个做一个排序处理，比如按时间排序，按推荐数排序等，这里就要用的集合里面的操作了
然后我们来看看我们如何只改变集合的数据，而让dom自己发生变化
有一点需要注意的是，我们现在还不是完整的单页，后面引入路由时候慢慢改进程序结构
首先我们需要为下面几个可爱的按钮绑定点击事件：
1 <ul class="tab_search fix_bottom" id="sort">
2 <li class="tabcrt" attr="time">时间</li>
3 <li class="tab_hotel" attr="recommend">推荐</li>
4 <li class="tab_hotel" attr="read">阅读</li>
5 <li class="tab_hotel" attr="comment">评论</li>
6 </ul>
1 events: {
2 'click #sort': function (e) {
3 var el = $(e.target);
4 var sort = el.attr('attr');
5
6 var s = '';
7 }
8 },
events: {
'click #sort': function (e) {
var el = $(e.target);
var type = el.attr('attr');
this.list.setComparator(type);
this.list.sort();
}
},
//list新增方法
setComparator: function (type) {
this.comparator = function (item) {
return Math.max(item.attributes[type]);
}
}
这个时候在初始化时候再注册一个事件
this.listenTo(this.list, 'all', this.render);
于是就能点击不同的标签按不同的倒叙排列，这里注意一点是每次改变都会触发list的all事件（其实应该是reset），完了触发view的render重新渲染了下数据
完整代码
这里对集合的操作暂时到此，对model的操作仍然没有涉及，我们先引入路由再说吧
Control-引入路由
MVC中View的代码量可能很大，但是Control的代码往往才是核心，他全局观察着整个程序的运作，但是这里却给他换了个名字——路由
其实这个名字比较靠谱，Backbone中的控制器其实就是充当了路由的角色
路由的效果
现在我们还没看源码，不知道其实现细节，但是实现表现是这样的：
http://www.example.com/#/state1
http://www.example.com/#/state2
这里state1，和state2便是不同的View了，以我们这个例子来说，如果index是首页列表视图，detail便是某一篇博客的视图了，所以
http://www.example.com/#/index——首页列表
http://www.example.com/#/detail——具体博客
这个是路由的基本功能，想一想，假如，我们现在各个View已经写开了，view与view直接数据可以由localstorage通信
但是全局性各个状态，全局共用方法还得放到控制器里面，这里对应的就是路由里面（比如我一个全局的showLoading方法）
说了这么多也没意义，我们先将detail的view做了，再看他是怎么路由的
切换视图
其实这个代码，我处理的的有问题，我们上面的列表中的每一个列表项其实应该对应一个model
我在过程中却将model与dom的映射关系给丢了，比如我现在点击一个列表项，我需要知道我现在对应的是哪一个model
这里补救方案是给dom上增加一个索引index，点击时候根据index获取当前索引，但是这不是长久之计，后面需要更好的办法
1 for (var i = 0, len = models.length; i < len; i++) {
2 models[i].index = i;
3 html += this.itemTmpt(_.extend(models[i].toJSON(), {index: i}));
4 }
于是我们每一个dom上面就会多出一个index的属性，哎，这里感觉不是太好啊
现在点击各个列表后会给相关model增加一个model的属性：
然后我们这里初略的重新渲染下页面，这里稍微修改下代码：
完整的代码
这个代码里面，我们点击其中一个list-item就会显示我们博客正文，但是问题马上就来了
现在的问题
做到现在我们程序大概的逻辑也出来了，当然，问题也出来了：
① 我从首页来到了博客页，但是大哥，我该怎么回去啊？？？
② 我们的程序全部在demo这个页面里面，个人感觉很乱啊！！！现在是两个view就这样，万一我有20个view我是不是要哭！！！
③ 我们最开始的view时index的，比如上面的回退按钮与“博客园”三个字，我们在博客页整个view应该隶属于自己的，但是这是嵌套的，很乱
要解决以上问题，我觉得是时候引入require已经路由的知识点了
require这个库，我们后面有时间在一起深入学习下，这里只是使用其核心的功能，简单起见，模板我就全部写在demo中，不予分离了
引入路由功能
我们当然想在页面中点击某个按钮来导向某个方法了，比如我们上面进入了detail博客页，我现在先回到首页，我可以后退
1 var App = Backbone.Router.extend({
2 routes: {
3 "": "index", // #index
4 "index": "index", // #index
5 "detail": "detail" // #detail
6 },
7 index: function () {
8 var index = new Index();
9 }
10 });
11
12 var app = new App();
13 Backbone.history.start();
这么小心一段代码加上后，就会在页面url锚点#后面的字符变了后执行相关的方法，显然我们这里需要更多的信息，或者说，我们的路由应该担任整个view通信的功能
首先，我们这里将index与detail两个view的模板完全独立，这里用了比较图的办法，全部清除html，但是现在确实可以跳转了
View Code
现在问题又来了，我点击其中一个一个列表项目时候，我就执行了render方法，现在我不想这么做了，我想将其加载数据的逻辑放到detail里面去
并且通过路由的方式实现，但是我们数据model的传递（这里没有使用localstorage）需要用路由来实现
重要版本
如此一来，我们的基本逻辑结束，马上我们又面临其它问题：
① 我们每个view的initialize方法都会被传入app接口
② 我们每个view都有一些重复的代码（比如this.app = app），而我们各个view没有好的状态控制
比如我们页面的create阶段，load阶段，show阶段，hide阶段，这些都需要事件进行处理，这里却没法一一关注
③ 可以看到，我们的路由居然还充当了很多传递数据的作用，但是我们并不应该这样写
④ 各位是否感觉我们的路由仍然太简陋，我们的程序很容易报错呢？
以上这些问题暂时留给各位思考，我下次使用require将我们的view分离先，本来今天想做的，但是感觉干不动了
结语
今天的内容暂时到此，本来想做个简单的例子来着，结果做着做着居然又涉及到这么多东西了，我们下次将这个单页应用完成，并且开始源码学习：
① 细化App（路由/控制器），让其完成更多的工作
② 引入require分离view
③ 创建view父类供各个view使用
④ 源码细节实现分析
总的来说，Backbone的阅读应该比原来碰到的框架难，原来那些框架只不过是基础库，但是Backbone涉及到了思想
这种框架性东西，我们后面还得花大力气消化，今天暂时到此
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3486173.html，如需转载请自行联系原作者
