Backbone.js框架中Model與Collection的使用實例

首頁

web前端

js教程

Backbone.js框架中Model與Collection的使用實例_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:01 PM

backbonecollectionjavascriptjsmodel

Model
關於backbone，最基礎的一個東西就是model，這個東西就像是後端開發中的資料庫映射那個model一樣，也是資料物件的模型，並且應該是和後端的model有相同的屬性（僅是需要透過前端來操作的屬性）。
下面就從實例來一步一步的帶大家來了解backbone的model到底是什麼樣的一個東西。
先定義一個html的頁面：

<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
 *此处填充代码
 **/
})(jQuery);
</script>
</html>

下面的程式碼需要填到這個html的script標籤中的function。

1、最簡單的一個物件

Man = Backbone.Model.extend({
    initialize: function(){
      alert('Hey, you create me!');
    }
  });
var man = new Man;

這個就很簡單了，在helloworld裡面也有了一個model的展現，不定義了屬性，這裡是一個初始化時的方法，或者稱之為構造函數。

2、物件賦值的兩種方法
第一種，直接定義，設定預設值。

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
});

var man = new Man;
alert(man.get('name'));

第二種，賦值時定義

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  }
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));

取值的時候都是用get。

3、物件中的方法

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
alert(man.aboutMe());

4、監聽物件中屬性的變化

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。

5、為物件新增驗證規則，以及錯誤提示

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。

6、物件的取得與保存，需要伺服器端支援才能測試。
首先需要為物件定義一個url屬性，呼叫save方法時會post物件的所有屬性到server端。

Man = Backbone.Model.extend({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况，如果直接使用fetch方法，那么他会发送get请求到你model的url中，
  //你在服务器端可以通过判断是get还是post来进行对应的操作。
man1.fetch();
//第二种情况，在fetch中加入参数，如下：
man1.fetch({url:'/getmans/'});
  //这样，就会发送get请求到/getmans/这个url中，
  //服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。

//不过接受服务器端返回的数据方法是这样的：
man1.fetch({url:'/getmans/',success:function(model,response){
    alert('success');
    //model为获取到的数据
    alert(model.get('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});

註：上述程式碼僅皆為可正常執行的程式碼，不過關於伺服器端的實例在後面會有。
這裡還要補充一點，就是關於伺服器的非同步操作都是透過Backbone.sync這個方法來完成的，呼叫這個方法的時候會自動的傳遞一個參數過去，根據參數向伺服器端發送對應的請求。例如你save，backbone會判斷你的這個物件是不是新的，如果是新建立的則參數為create，如果是已存在的物件只是進行了改變，那麼參數就為update，如果你呼叫fetch方法，那參數就是read，如果是destory，那麼參數就是delete。也就是所謂的CRUD ("create", "read", "update", or "delete")，而這四種參數對應的請求類型為POST，GET，PUT，DELETE。你可以在伺服器根據這個request類型，來做出對應的CRUD操作。

Note:
關於url和urlRoot的事，如果你設定了url，那麼你的CRUD都會發送對應請求到這個url上，但是這樣又一個問題，就是delete請求，發送了請求，但是卻沒有發送任何數據，那麼你在伺服器端就不知道應該刪除哪個物件（記錄），所以這裡又一個urlRoot的概念，你設定了urlRoot之後，你發送PUT和DELETE請求的時候，其請求的url位址就是：/baseurl/[model.id ]，這樣你就可以在伺服器端透過對url後面值的提取更新或刪除對應的物件（記錄）。

Collection
collection是model物件的一個有序的集合，概念理解起來十分簡單，在透過幾個例子來看一下，會覺得更簡單。
1、關於book和bookshelf的例子

Book = Backbone.Model.extend({

defaults : {  // 感谢网友蓝色动力指正改为defaults

title:'default'

},

initialize: function(){

//alert('Hey, you create me!');

}

});

BookShelf = Backbone.Collection.extend({

model : Book

});

var book1 = new Book({title : 'book1'});

var book2 = new Book({title : 'book2'});

var book3 = new Book({title : 'book3'});

//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add

var bookShelf = new BookShelf;

bookShelf.add(book1);

bookShelf.add(book2);

bookShelf.add(book3);

bookShelf.remove(book3);



//基于underscore这个js库，还可以使用each的方法获取collection中的数据

bookShelf.each(function(book){

alert(book.get('title'));

});

很簡單，不解釋
2、使用fetch從伺服器端取得資料
首先要在上面的的Bookshelf定義url，注意collection中並沒有urlRoot這個屬性。或是你直接在fetch方法中定義url的值，如下：

bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

collection.each(function(book){

alert(book.get('title'));

});

},error:function(){

alert('error');

}});

其中也定義了兩個接受返回值的方法，具體含義我想很容易理解，返回正確格式的數據，就會調用success方法，錯誤格式的數據就會調用error方法，當然error方法也看加入和success方法一樣的形參。
對應的BookShelf的回傳格式如下：[{'title':'book1'},{'title':'book2'}.....]
3、reset方法
這個方法的時候是要跟上面的fetch進行配合的，collection在fetch到資料之後，會呼叫reset方法，所以你需要在collection中定義reset方法或是綁定reset方法。這裡使用綁定示範：

bookShelf.bind('reset',showAllBooks);

showAllBooks = function(){

bookShelf.each(function(book){

  &#8203;//将book数据渲染到页面。

});

}

綁定的步驟要在fetch之前進行。
以下給出關於collection的完整程式碼，需要伺服器端支援才行，伺服器端的搭建在後面會寫到。

<!DOCTYPE html>
<html>
<head>
  <title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
  //collection是一个简单的models的有序集合
  //1、一个简单的例子

  Book = Backbone.Model.extend({
    defaults : {  // 感谢网友蓝色动力指正改为defaults
      title:'default'
    },
    initialize: function(){
      //alert('Hey, you create me!');
    }
  });
  BookShelf = Backbone.Collection.extend({
    model : Book
  });

  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book({title : 'book3'});

  //var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);
  /*
  for(var i=0; i<bookShelf.models.length; i++) {
    alert(bookShelf.models[i].get('title'));
  }
  */
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
    alert(book.get('title'));
  });

  //2、使用fetch从服务器端获取数据,使用reset渲染
  bookShelf.bind('reset', showAllBooks);
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
    collection.each(function(book){
      alert(book.get('title'));
    });
  },error:function(){
    alert('error');
  }});
  showAllBooks = function(){
    bookShelf.each(function(book){
      &#8203;//将book数据渲染到页面。
    });
  }
  //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles