使用 Backbone 的示例（主要是 Backbone.Model）

Backbone.js 由四個獨立的元件組成：集合，模型，路由器和檢視。其中每個都有不同的用途：

• Model - 表示單個資料物件，但新增了本機 JavaScript 物件未提供的其他功能，例如事件系統和檢索資料並將資料傳送到遠端伺服器的更方便的方法

• Collection - 代表模型的集合或集合，並提供管理其模型的功能。

• View - 表示使用者介面的單個部分; 每個 View 包裝一個 HTML DOM 元素，並提供用於處理該元素的結構以及簡單事件繫結等便利功能。

• Router - 通過允許應用程式響應 URL 更改而觸發不同的邏輯（例如顯示不同的頁面）來啟用單頁面應用程式。

創造自己的口味

在我們看看如何使用這些元件之前，讓我們先來看看 Backbone 的類系統。要建立 Backbone 類的新子類，只需呼叫原始類的 extend 方法，並將例項屬性和（靜態）類屬性作為物件傳遞給它：

const MyModelClass = Backbone.Model.extend({
    instanceMethod: function() { console.log('Instance method!'); },
}, {
    staticMethod: function() { console.log('Static method!'); },
});

與任何其他類系統一樣，可以在類的例項（物件）上呼叫例項方法，而直接在類本身（建構函式）上呼叫靜態方法：

var myInstance = new MyModelClass();

// Call an instance method on our instance
myInstance.instanceMethod(); // logs "Instance method!"

// Call a static method on our class
MyModelClass.staticMethod(); // logs "Static method!"

使用類

現在，讓我們看一個如何使用每個類的快速示例。我們將從一本書的開頭開始。

const Book = Backbone.Model.extend({
    idAttribute: 'isbn',
    urlRoot: '/book'
});

讓我們分解那裡剛剛發生的事情。首先，我們建立了 Model 的 Book 子類，我們給它了兩個例項屬性。

• idAttribute 告訴 Backbone 在執行 AJAX 操作時使用模型的 isbn 屬性作為其 ID。
• urlRoot，告訴 Backbone 在 www.example.com/book 上查詢圖書資料。

現在讓我們建立一本書的例項，並從伺服器獲取其資料：

var huckleberryFinn = new Book({ isbn: '0486403491' });
huckleberryFinn.fetch({
    // the Backbone way
    success: (model, response, options) => {
       console.log(model.get('name')); // logs "Huckleberry Finn"
    }
}).done(() => console.log('the jQuery promise way'));

當我們建立一個新的 Book 時，我們傳遞了一個物件，Backbone 使用這個物件作為 Model 的初始屬性（資料）。因為 Backbone 知道 idAttribute 是 isbn，它知道我們的新書的 URL 是/book/0486403491。當我們告訴 fetch 時，Backbone 將使用 jQuery 為本書的資料發出 AJAX 請求。fetch 返回一個 promise（就像 $.ajax 一樣），你可以用它來在 fetch 完成後觸發動作。

可以使用 get 或 set 方法訪問或修改屬性：

huckleberryFinn.get('numberOfPages'); // returns 64

huckleberryFinn.set('numberOfPages', 1); // changes numberOfPages to 1

Models 還有一個事件系統，當事情發生時，你可以用它做出反應 23。例如，要在 numberOfPages 發生更改時記錄訊息，你可以執行以下操作：

huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!'));

有關其他 Backbone 類的更詳細介紹，請檢視其各自的文件頁面。