著手開(kāi)始學(xué)習(xí)
什么是backbone.js?
美公的理解是 一種js的mvc的框架，分為Model(模型),View(視圖)和Collection(集合)，如果有mvc分層開(kāi)發(fā)經(jīng)驗(yàn)的話，會(huì)容易理解。
為什么學(xué)習(xí)這個(gè)?
因?yàn)橛盟梢栽诘膯蝹€(gè)頁(yè)面完成多個(gè)應(yīng)用模塊，給用戶的感覺(jué)是不用刷新頁(yè)面，適合webapp開(kāi)發(fā)
$(function(){
var testModel = Backbone.Model.extend({
defaults:{
id:"1",
name:'meigong',
age:'22'
}
});
var Collection = Backbone.Collection.extend({
model:testModel
});
var ItemView = Backbone.View.extend({
tagName:'tr',
template: _.template($('#tpl-item').html()),
initialize: function(){
this.model.bind('remove', this.unrender,this);
this.model.bind('change', this.render,this);
},
events: {
'click a.edit':'editItem',
'click a.del':'delItem',
"blur input,select" : "saveItem"
},
editItem:function(){
//獲取所有的input
var input = $(this.el).find('input');
input.each(function(k,v){
$(v).removeAttr('disabled');
});
},
delItem:function(){
//從集合中刪除
app.collection.remove(this.model);
},
saveItem:function(){
alert(2);
},
unrender:function(){
$(this.el).remove();
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var View = Backbone.View.extend({
el:$('#test'),
template: _.template($('#tpl-student').html()),
initialize:function () {
//this.model.bind("change", this.render, this);
this.render();
this.collection = new Collection();
this.collection.bind('add', this.appendItem,this);
this.id= 0;
},
events: {
'click #btn':'addItem'
},
addItem:function(){
this.id ++;
this.testmodel = new testModel();
this.testmodel.set({
id:this.id
});
//添加到集合中
this.collection.add(this.testmodel);
},
appendItem:function(){
var itemView = new ItemView({model:this.testmodel});
$(this.el).append(itemView.render().el);
},
render: function(eventName) {
$(this.el).html(this.template());
}
});
var app = new View();
});
開(kāi)始說(shuō)明：本例是美公筆記草稿，本地運(yùn)行沒(méi)問(wèn)題，如拷貝代碼會(huì)缺少文件
修改的地方
1.把backone-min.js中的部分修改為create:”P(pán)OST”,update:”P(pán)OST”,”delete”:”DELETE”,read:”GET”
2.服務(wù)器端接受 post過(guò)來(lái)的json數(shù)據(jù) $data = json_decode$GLOBALS['HTTP_RAW_POST_DATA']);
用到的模板
主文件代碼
$(function(){
//實(shí)例化 index列表
//index列表的model
var index_Model = Backbone.Model.extend({
", //請(qǐng)求的地址
});
//model的集合
var index_Collection = Backbone.Collection.extend({
model: index_Model, //集合包含的model層
url: './get.php' //請(qǐng)求的地址
});
//對(duì)應(yīng)的每個(gè)元素的view
var index_list_View = Backbone.View.extend({
template: _.template($('#tpl-item').html()),
initialize:function () {
this.model.bind("change", this.render, this); //在model 執(zhí)行set,add,destroy時(shí)會(huì)觸發(fā)
},
events:{ //綁定事件
'click .bannerImg':'addNum',
'click .bannerInfo':'comment'
},
addNum:function(){
//單擊圖片 顯示的名字會(huì)改變
this.model.set({ //會(huì)觸發(fā)change事件
'name':'超姐你好',
});
this.model.save(null,{ //發(fā)起一個(gè)post請(qǐng)求
})
},
comment:function(){
var id = this.model.get('id');
app.navigate("comment/"+id, true); //hash導(dǎo)航url
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
//list View 是 index_list_View的集合
var index_item_View = Backbone.View.extend({
initialize: function() {
this.model.bind('reset', this.render, this); //這里的model是個(gè)集合 傳入的是index_Collection
var self = this;
this.model.bind("add", function (item) { // 在 index_Collection 執(zhí)行add操作會(huì)觸發(fā) add 或者 發(fā)起create請(qǐng)求時(shí)也會(huì)觸發(fā)
$(self.el).append(new index_list_View({model:item}).render().el);
});
},
render: function(eventName) { //渲染
//這里的model是個(gè)集合
_.each(this.model.models,function(item) {
$(this.el).append(new index_list_View({model: item}).render().el);
},
this);
return this;
}
});
//發(fā)表評(píng)論功能
var comment_add_View = Backbone.View.extend({
template: _.template($('#tpl-comment').html()),
initialize:function () {
this.render();
},
events:{
'click .btn':'addCom',
},
addCom:function(){
var title = $("input[name='title']").val();
var data = {
title:title
}
//這里必須寫(xiě)app啊
app.comment_collection.create(data,{
,
success:function(){
}
});
},
render: function() {
$(this.el).html(this.template()); //沒(méi)有model時(shí) 直接寫(xiě)this.template() 。有model要解析model成字符串 用到的是this.model.toJSON()
return this;
}
});
/***顯示評(píng)論列表功能 代碼解釋同上**/
var comment_Model = Backbone.Model.extend({
",
defaults:{
title:'',
}
});
var comment_Collection = Backbone.Collection.extend({
model: comment_Model,
url: 'http://www.biuman.com/test/before/test'
});
var comment_list_View = Backbone.View.extend({
template: _.template($('#tpl-comment-list').html()),
initialize:function () {
this.model.bind("change", this.render, this);
},
events:{
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var comment_item_View = Backbone.View.extend({
initialize: function() {
this.model.bind('reset', this.render, this); //這里的model是個(gè)集合
var self = this;
this.model.bind("add", function (item) {
$(self.el).append(new comment_list_View({model:item}).render().el);
});
},
render: function(eventName) {
//這里的model是個(gè)集合
_.each(this.model.models,function(item) {
$(this.el).append(new comment_list_View({model: item}).render().el);
},
this);
return this;
}
});
// Router
var AppRouter = Backbone.Router.extend({
routes: {
"": "list",
"comment/:id":"comment"
},
initialize: function() {
},
list: function() {
if(typeof this.index_collection == 'undefined'){
this.index_collection = new index_Collection();
this.index_item_view = new index_item_View({
model: this.index_collection //傳入的index_collection集合
});
var self = this;
this.index_collection.fetch({
success: function(collection, resp) {
//console.dir(collection.models);
}
}); //fetch先綁定 rest事件
}else{
this.index_item_view = new index_item_View({
model: this.index_collection
});
}
$('#content').html(this.index_item_view.render().el);
},
comment:function(id){
this.comment_collection = new comment_Collection();
this.comment_item_view = new comment_item_View({
model: this.comment_collection //傳入的集合
});
var self = this;
this.comment_collection.fetch({
,
success: function(collection, resp) {
$('#content').append(new comment_add_View().render().el)
}
}); //fetch先綁定 rest事件
$('#content').html(this.comment_item_view.render().el);
}
});
var app = new AppRouter();
Backbone.history.start();
});