萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> 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

copyright © 萬盛學電腦網 all rights reserved