65.9K
CodeProject 正在变化。 阅读更多。
Home

BackBone 教程 – 第 8 部分：理解 Backbone.js 事件

Rahul Rajat Singh
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.96/5 (15投票s)

2015 年 2 月 24 日

CPOL

5分钟阅读

viewsIcon

40514

downloadIcon

533

在本文中，我们将探讨 Backbone.js 中的事件。

引言

在本文中，我们将探讨 Backbone.js 中的事件。我们将了解 Backbone 如何为我们提供事件，以及我们如何在应用程序中使用 Backbone 事件。

背景

事件是任何应用程序框架的重要组成部分。在应用程序方面，事件主要在两种情况下非常有用。当我们想在应用程序中实现发布-订阅模型时，事件尤其有用，其中应用程序的一个区域（发布者）中的任何更改都会触发通知给所有感兴趣的人（订阅者）。

有大量的 JavaScript 库可用于在我们的 JavaScript 应用程序中实现事件。Backbone 还提供了一个非常好的事件机制实现，使我们在应用程序中使用发布-订阅模型变得无缝。现在，让我们看看如何在 Backbone 应用程序中使用事件。

完整系列链接

  1. BackBone 教程 – 第 1 部分：Backbone.Js 简介[^]
  2. BackBone 教程 – 第 2 部分：理解 Backbone Models 的基础知识[^]
  3. BackBone 教程 – 第 3 部分：更多关于 Backbone Models[^]
  4. BackBone 教程 – 第 4 部分：使用 HTTP REST 服务对 BackboneJs Models 执行 CRUD 操作[^]
  5. BackBone 教程 – 第 5 部分：理解 Backbone.js Collections[^]
  6. BackBone 教程 – 第 6 部分：理解 Backbone.js Views[^]
  7. BackBone 教程 – 第 7 部分：理解 Backbone.js Routes 和 History[^]
  8. BackBone 教程 – 第 8 部分：理解 Backbone.js 事件[^]

Using the Code

Backbone 提供了一种非常简单、清晰且优雅的事件使用方式。Backbone 所做的是，它允许任何对象通过扩展 Backbone.Events. 来关联 Backbone 事件。这可以通过调用对象实例上的 _.extend 方法来完成。让我们创建一个扩展自 Backbone.Event 的简单对象。

var testObj = {};
_.extend(testObj, Backbone.Events);

一旦我们扩展了 Backbone.Event，我们就可以使用 on 将回调函数与事件关联起来。让我们定义一个简单的函数并订阅一个事件。

function ShowMeWhenSomethingHappens(message) {
    alert(message);
}

testObj.on('something', ShowMeWhenSomethingHappens);

现在，调用此事件的最简单方法是调用事件名称上的 trigger。让我们调用该函数并查看结果。

testObj.trigger('something', 'Hello events');

所以我们可以看到使用 Backbone 的触发器是多么简单。是这样吗？我在这类事件机制中看到的唯一痛点是使用 _.extend 将 Backbone 事件与对象进行关联。幸运的是，我们不必调用这个 extend 来将 Backbone 事件机制与任何对象关联起来。如果我们有一个扩展自 Backbone 类型（即 Model、View、Collection）的对象，那么事件机制就默认与它关联了。所以，假设我们有一个简单的 Model，如下所示：

var Book = Backbone.Model.extend({
    defaults: {
        ID: "",
        BookName: ""
    }
});

它已经与 Backbone 事件关联了。所以，如果我运行以下代码，它应该可以正常工作，并像之前的代码一样显示警告。

var book = new Book();
book.on('something', ShowMeWhenSomethingHappens);
book.trigger('something', 'Hello events - backbone model');

同样，事件可以无缝地用于任何 Backbone 对象。现在，让我们看看可以用来完全控制这些事件的函数。第一个引起我们兴趣的函数是 on。on 将一个回调函数附加到一个事件。

var book = new Book();
book.on('something', ShowMeWhenSomethingHappens);

使用 on 函数附加到事件的回调函数可以使用 off 删除。因此，如果我们想删除上一步中附加到事件的回调函数，我们只需使用 off 函数。

book.off('something', ShowMeWhenSomethingHappens);

如果我们想将一个回调与一个事件关联，并且只调用一次，我们可以使用 once。

book.once('something', ShowMeWhenSomethingHappens);

最后，我们如何触发一个事件？可以使用 trigger 函数触发事件。

book.trigger('something', 'Hello events - backbone model');

这些是我们用来订阅事件的基本函数。需要注意的重要一点是，这些函数是在发布事件的对象上使用的。如果我们想使用另一个对象（即订阅者），那么还有另一组函数可以使用。在查看函数之前，让我们尝试更好地理解这个场景。假设我的应用程序中有一个 Model Catalog。

var Catalog = Backbone.Model.extend({
    defaults: {
        ID: "",
        CatalogName: ""
    },

    // code omitted for brevity

    bookChanged : function(book) {
        alert(book.get("BookName"));
    }
});

这个 Model 期望的是，每当一本书被更改时，bookChanged 函数就会被调用。一种方法是使用 on 函数，如下所示：

var catalog = new Catalog();

var book = new Book({BookName : "test book1"});                

book.on('changed', catalog.bookChanged);

book.trigger('changed', book);

另一种执行相同操作的方法是使用订阅者（即 catalog 对象）上的事件关联函数。要实现这一点，我们需要使用 listenTo 函数。让我们看看如何做到这一点。

var catalog = new Catalog();

var book = new Book({BookName : "test book1"});                

catalog.listenTo(book, 'changed', catalog.bookChanged);

book.trigger('changed', book);

在上面的代码中，我们仍然使用 catalog 对象订阅 book 的事件，但是改用 catalog 对象上的 listenTo 函数。如果我们想删除关联的对象，那么我们可以使用 stopListening 函数。

catalog.stopListening(book);

如果我们想在此场景中实现与 `once` 相同的效果，我们可以改用 listenToOnce 函数。

catalog.listenToOnce(book, 'changed', catalog.bookChanged);

使用这组函数而不是之前展示的一组函数的好处是，订阅者可以跟踪他们订阅的所有事件，然后有选择地添加和删除他们的订阅。

注意：上面的代码示例非常牵强，离真实世界的例子相去甚远。它的唯一目的是展示给定函数集的工作方式。

Backbone 框架触发了许多内置事件，我们可以在应用程序中订阅它们。例如，当 Model 的状态更改时，会触发 "change"。当项目被添加到 Collection 或从 Collection 中删除时，会分别调用 "add" 和 "remove"。框架在 Model、View、Collection 和 Route 上触发了许多此类内置事件。我建议参考 Backbone 文档以获取完整的列表。

看点

在这篇简短的文章中，我们探讨了 Backbone 中的事件。Backbone 如何使其事件处理变得极其容易，以及它提供了多少内置事件可供应用程序快速订阅。本文是从初学者的角度撰写的。希望本文内容丰富。

历史

  • 2015 年 2 月 24 日：初版
© . All rights reserved.