帮酷LOGO
  • 显示原文与译文双语对照的内容


介绍

在本文中,我们将查看 backbone.js 中的事件。 我们将看到 Backbone 如何提供事件,以及如何在我们的应用程序中使用 Backbone 事件。

背景

事件是任何应用程序框架中的重要组成部分。 事件主要在应用程序中有两种情况。 当我们希望在应用程序中实现发布服务器订阅者模型时,任何更改都会触发应用程序的通知,事件特别有用。

有很多JavaScript库可以用来在我们的JavaScript应用程序中实现事件。 Backbone 还提供了非常好的事件机制实现,这使得在我们的应用程序中使用发布者模型。 现在让我们看看如何在 Backbone 应用程序中使用事件。

链接至完整系列:

使用代码

Backbone 提供了一种非常简单。干净和优雅的使用事件的方法。 Backbone的作用是通过在对象实例上调用 _.extend 方法,只允许任何对象与 Backbone 事件关联,这可以通过调用 Backbone.Events. 方法来完成。 让我们创建一个从 Backbone.Event. 扩展的简单对象

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

Backbone.Event 扩展之后,我们可以使用 on 将回调函数与事件钩子。 让我们定义一个简单的函数并订阅一个事件。

function ShowMeWhenSomethingHappens(message) {
 alert(message);
}
testObj.on('something', ShowMeWhenSomethingHappens);

现在调用这里事件的最简单方法是调用事件 NAME 上的trigger 。 让我们调用函数并查看结果。

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

这样我们就可以看到在 Backbone 中使用触发器是多么简单。 或者者,我在这个事件机制中看到的唯一痛苦就是将 Backbone 事件与使用 _.extend的对象连接起来。 幸运的是,我们不需要调用这种扩展来将 Backbone 事件机制与任何对象。 如果我们有一个从 Backbone 类型 换句话说,模型,视图,Collection 扩展的对象,那么我们就会在默认情况下使用事件机制。 假设我们有一个简单的模型如下。

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 对象一起被无缝地使用。 现在我们来看看可以以用来完全控制这些事件的函数。 我们感兴趣的第一个函数是 onon 附加一个带有事件的回调函数。

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

使用 on 函数附加到事件的回调函数可以使用 off 删除。 因此,如果要删除前面步骤中附加到事件的回调函数,我们只需要使用 off 函数。

book.off('something', ShowMeWhenSomethingHappens);

如果希望将回调与仅被调用一次的事件关联起来,我们可以使用 once

book.once('something', ShowMeWhenSomethingHappens);

还有 finally 我们怎么能触发一个事件? 事件可以通过使用 trigger 函数触发。

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

这些是我们可以用来订阅事件的基本函数。 这里要注意的重要一点是,这些函数正被用于发布事件的对象上。 如果我们想使用另一个对象 换句话说,那么有另一组函数可以以使用。 在查看这个函数之前,让我们试着更好地。 让我在我的应用程序中有另一个模型 Catalog

var Catalog = Backbone.Model.extend({
 defaults: {
 ID: "",
 CatalogName: "" },
 // code ommitted for brevity bookChanged : function(book) {
 alert(book.get("BookName"));
 }
});

这个模型预期的是,只要一本书被修改,bookChanged 函数就会被调用。 一种方法是使用on函数作为:

var catalog = new Catalog();var book = new Book({BookName : "test book1"}); 
book.on('changed', catalog.bookChanged);
book.trigger('changed', book);

执行相同事情的另一种方法是使用订阅服务器 换句话说,上的事件关联函数( 目录对象) 。 为了实现这个目标,我们需要使用 listenTo 函数。 让我们看看如何做到这一点。

var catalog = new Catalog();var book = new Book({BookName : "test book1"}); 
catalog.listenTo(book, 'changed', catalog.bookChanged);
book.trigger('changed', book);

在 above 代码中,我们仍然在订阅目录对象,但是在目录对象的listenTo 函数中使用了函数。 如果我们想删除关联的对象,我们可以使用 stopListening 函数。

catalog.stopListening(book);

如果希望在这个场景中使用一次 equivalnt,我们可以使用 listenToOnce 函数。

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

使用这些函数集的好处是订阅者可以以跟踪他们订阅的所有事件并选择地添加它们的订阅。

注意:代码示例非常做作,远离现实世界示例。 它的唯一目的是说明给定的函数集是如何工作的。

我们可以在应用程序中订阅的事件中有很多构建事件。 例如当" change"的状态改变时,将在模型上触发它。 " add"还有" remove"每次添加或者从 Collection 中移除项时都将被调用。 有很多这样的事件,框架在模型。视图。集合和路由上触发。 我建议参考 Backbone 文档以获得详细的列表。

目标点

在这个小文章中,我们查看了 Backbone 中的事件。 Backbone 如何使它非常容易使用事件以及它如何提供可以以从应用程序中订阅的大量内置事件。 这篇文章是从初学者的角度写的。 我希望这是有意义的。

历史记录

  • 24 2015年月: 第一个版本



Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语