backbone应用笔记

由于公司手机端web的需要，最近开始用上backbone，之前觉得很难学，也一直没看到前端mvc具体是个啥，后来由于项目紧急，就抽空看了一遍underscore和backbone的源码，收获还是蛮大的。

1. 一个页面可以只有model和view,若后台返回有多条记录，就需要用collection来进行model的管理。
2. model的id一般都是设置为后台返回的数据唯一的标志，比如mongodb的_id，在model里可以通过idAttribute来设置
3. 当后台返回的数据不是按照backbone规定的格式时，可以通过model或collection提供的parse函数进行数据的转换
4. 如果需要用标准的rest api那么model里设置urlRoot属性就可以了，同时collection可以设置url的属性进行批量数据获取，实际发的是get请求
5. 当定义的url或urlRoot时，在调用model或者collection的save等方法时传入url属性后，与后台交互时优先用传的url值
6. 在model或者collection调用fetch时，可以配置success和error选项在后台返回数据时进行UI提示，比如，loading提示等。

附js代码：

$(function(){
var globalLoadingObj = $('#globalLoading');
var dialogAlertObj = $('#dialogAlert');
var itemWrapperObj = $('#itemWrapper');
var orderWrapperObj = $('#orderWrapper');
var pageContainerObjs = $('#index').find('.pageContainer');
var itemModel = Backbone.Model.extend({
urlRoot:host+'/1/classes/items',
idAttribute:'_id',
parse:function(response){
return response.results;
}
});
var itemView = Backbone.View.extend({
className:'itemContainer',
template:_.template($('#itemTemplate').html()),
initialize:function(){
this.model.bind('change',this.render,this);
this.model.bind('destroy',this.remove,this);
this.model.fetch({success:function(response,xhr){
hideLoading();
},error:function(){
fetchModelErr();
},
//silent:false,
data:{
limit:1,
skip:0
}})
},
render:function(){
itemWrapperObj.append($(this.el).html(this.template(this.model.toJSON()[0])));
return this;
},
remove:function(){
$(this.el).remove();
return this;
}
});
var initItemModel = new itemModel();
//初始化 itemView
initItemView();
var orderModel = Backbone.Model.extend({
urlRoot:'',
idAttribute:'_id',
parse:function(response){
return response.results;
}
});
var orderView = Backbone.Model.extend({
className:'orderSubContainer'
});
function fetchModelErr(){
var html = '<div class="errTip"><p class="errP"><a href="/static/ctm/index.html">加载失败,点击重试！</a></p></div>';
showDialogAlert(html);
}
function initItemView(){
showLoading();
new itemView({model:initItemModel});
initItemEvent();
initOrderEvent();
}
function initItemEvent(){
itemWrapperObj.on('click','.footer',function(){
var self = $(this);
if(self.hasClass('footer')){
showPage(orderWrapperObj);
}
})
}
function initOrderEvent(){
orderWrapperObj.on('click','.editOrderBtn,.fc_btn',function(){
var self = $(this);
if(self.hasClass('editOrderBtn') || self.hasClass('fc_btn_o')){
showPage(itemWrapperObj);
}
})
}
function showLoading(){
globalLoadingObj.show();
}
function hideLoading(){
globalLoadingObj.hide();
}
function showDialogAlert(html,closeT){
dialogAlertObj.html(html).show();
if(closeT && !isNaN(closeT)){
var closeTimeOut = setTimeout(function(){
hideDialogAlert();
clearTimeout(closeTimeOut);
},closeT*1000);
}
}
function hideDialogAlert(){
dialogAlertObj.hide();
}
function showPage(pageID){
pageContainerObjs.hide();
$(pageID).show();
}
});

附html的template代码：

<script type="text/template" id="itemTemplate">
<h2 class="title"><%= title %></h2>
<div class="itemContent">
<img class = "itemimg" src="<%= pic %>" />
</div>
<div class="priceContainer"><span class="iPrice">￥<%= iPrice %></span><span class="mPrice">￥<%= mPrice %></span><span class="buyN"><%= buyN %>人购买</span></div>
<div class="itemDetailContainer"><span class="text">商品详情（仅剩<%= num %>件）</span></div>
<footer class="footer"><div class="buyBtnWrapper"><i class="iLeft"></i><a href="#" class="buyBtn">立刻抢购</a><i class="iRight"></i></div></footer>
</script>