着手开始学习
什么是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({
url:"./get.php", //请求的地址
});
//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请求
url:'http://www.biuman.com/test/before/update2'
})
},
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,{
url:'http://localhost/ci/before/insert2',
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({
url:"./get.php",
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({
url:'http://www.biuman.com/test/before/test2/'+id,
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();
});