著手開(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();

});

更多信息請(qǐng)查看IT技術(shù)專欄