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

Created: November-22, 2018

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 类的更详细介绍，请查看其各自的文档页面。