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

示例

Backbone.js由四个独立的组件组成：集合，模型，路由器和视图。这些功能分别具有不同的目的：

• Model -表示单个数据对象，但添加了本机JavaScript对象未提供的其他功能，例如事件系统和检索数据并将其发送到远程服务器的更便捷方法

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

• View-代表用户界面的单个部分；每个视图都包装一个HTML DOM元素，并提供用于处理该元素的结构以及诸如简单事件绑定之类的便利功能。

• Router -通过允许应用程序响应URL更改触发不同的逻辑（例如，显示不同的页面）来启用“单页应用程序”。

创建

在研究如何使用这些组件中的每一个之前，让我们先快速了解一下Backbone的类系统。要创建Backbone类的新子类，只需调用extend原始类的方法，然后将实例属性和（静态）类属性作为对象传递给它：

const MyModelClass = Backbone.Model.extend({
    instanceMethod: function() { console.log('实例方法！'); },
}, {
    staticMethod: function() { console.log('静态方法！'); },
});

与其他任何类系统一样，可以在类的实例（对象）上调用实例方法，而直接在类本身（构造函数）上调用静态方法：

var myInstance = new MyModelClass();

// 在我们的实例上调用实例方法myInstance.instanceMethod(); // logs "实例方法！"

// 在类上调用静态方法MyModelClass.staticMethod(); // logs "静态方法！"

使用类

现在，让我们看一下如何使用每个类的简单示例。我们将从Model一本书的开始。

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

让我们分解一下刚才发生的事情。首先，我们创建了的Book子类Model，并为其提供了两个实例属性。

• idAttribute 告诉Backbone在执行AJAX操作时将模型的“ isbn”属性用作其ID。

• urlRoot，告诉Backbone在www.example.com/book上查找图书数据。

现在，让我们创建一本书的实例，并从服务器获取其数据：

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

创建新Book对象时，我们将其传递给一个对象，Backbone将该对象用作的初始“属性”（数据）Model。因为Backbone知道idAttributeis isbn，所以知道我们新书的URL是/book/0486403491。当我们告诉它时fetch，Backbone将使用jQuery对书籍数据进行AJAX请求。fetch返回一个promise（就像$.ajax），一旦获取完成，您就可以使用它来触发操作。

可以使用get或set方法访问或修改属性：

huckleberryFinn.get('numberOfPages'); // 返回64

huckleberryFinn.set('numberOfPages', 1); // 将numberOfPages更改为1

Models还有一个事件系统，当事件发生时您可以做出反应Model。例如，要在numberOfPages更改时记录一条消息，您可以执行以下操作：

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

有关其他Backbone类的更详细介绍，请查看其各自的文档页面。