萬盛學電腦網 >> 腳本專題 >> javascript >> backbone.js學習實例
backbone.js學習實例
著手開始學習
什麼是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
