着手开始学习

什么是backbone.js?

美公的理解是 一种js的mvc的框架，分为Model(模型),View(视图)和Collection(集合)，如果有mvc分层开发经验的话，会容易理解。

为什么学习这个?

因为用他可以在的单个页面完成多个应用模块，给用户的感觉是不用刷新页面，适合webapp开发

$(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();

});

开始说明：本例是美公笔记草稿，本地运行没问题，如拷贝代码会缺少文件

修改的地方

1.把backone-min.js中的部分修改为create:”POST”,update:”POST”,”delete”:”DELETE”,read:”GET”

2.服务器端接受 post过来的json数据 $data = json_decode$GLOBALS['HTTP_RAW_POST_DATA']);

用到的模板

主文件代码

$(function(){

//实例化 index列表

//index列表的model

var index_Model = Backbone.Model.extend({

", //请求的地址

});

//model的集合

var index_Collection = Backbone.Collection.extend({

model: index_Model, //集合包含的model层

url: './get.php' //请求的地址

});

//对应的每个元素的view

var index_list_View = Backbone.View.extend({

template: _.template($('#tpl-item').html()),

initialize:function () {

this.model.bind("change", this.render, this); //在model 执行set,add,destroy时会触发

},

events:{ //绑定事件

'click .bannerImg':'addNum',

'click .bannerInfo':'comment'

},

addNum:function(){

//单击图片 显示的名字会改变

this.model.set({ //会触发change事件

'name':'超姐你好',

});

this.model.save(null,{ //发起一个post请求

})

},

comment:function(){

var id = this.model.get('id');

app.navigate("comment/"+id, true); //hash导航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是个集合 传入的是index_Collection

var self = this;

this.model.bind("add", function (item) { // 在 index_Collection 执行add操作会触发 add 或者 发起create请求时也会触发

$(self.el).append(new index_list_View({model:item}).render().el);

});

},

render: function(eventName) { //渲染

//这里的model是个集合

_.each(this.model.models,function(item) {

$(this.el).append(new index_list_View({model: item}).render().el);

},

this);

return this;

}

});

//发表评论功能

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

}

//这里必须写app啊

app.comment_collection.create(data,{

,

success:function(){

}

});

},

render: function() {

$(this.el).html(this.template()); //没有model时 直接写this.template() 。有model要解析model成字符串 用到的是this.model.toJSON()

return this;

}

});

/***显示评论列表功能 代码解释同上**/

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是个集合

var self = this;

this.model.bind("add", function (item) {

$(self.el).append(new comment_list_View({model:item}).render().el);

});

},

render: function(eventName) {

//这里的model是个集合

_.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();

});

更多信息请查看IT技术专栏