Backbone/Parse 事件范围

Question

我正在触发自定义事件，但找不到从另一个文件将操作绑定到它的方法。我想这是一个范围问题，但我无法单独解决它。

在我的应用入口文件中，我触发了一个自定义 boom 事件，如下所示：

 var page_object_test = {};
  _.extend(page_object_test, Parse.Events);
  page_object_test.trigger("boom");

这段代码包含在 jQuery $(document).ready() 语句中。

然后，在另一个文件中的 jQuery 插件综片中，并包含在 (function($) {})(jQuery); 构造中，我想将一些函数绑定到我的 boom 事件，但是没有任何反应：

var page_object = {
    update_page_title : function(route, params) {
      var new_title = "";

      switch(route) {
        default: 
          new_title = "La meilleure façon d'emmener vos enfants à l'école";
      }

      document.title.html(new_title);
    } 
};

  _.extend(page_object, Parse.Events);

  page_object.on("boom", function() {console.log(".on() binding is working!")});

为什么我不能从另一个文件接收到这个事件？我意识到我不明白 Backbone 事件是如何冒出来的。不仅仅是写这篇文章的正确方式，我真的很想被指出对这些事件的范围有一个清晰的解释。

欢迎任何解释

Answer 1

你有没有考虑过Marionette.Wreqr

https://github.com/marionettejs/backbone.wreqr

在Marionette中默认使用，但也可以在外部独立使用。

否则，您可以按照 Backbone 文档

中的描述使用 Backbone.Events

var object = {};
_.extend(object, Backbone.Events);
object.on('expand', function(){ alert('expanded'); });
object.trigger('expand');

假设对象在全局范围内可用，您可以在其上订阅和触发事件。

Answer 2

您的范围有问题：page_object_test 必须在您希望它收听的其他文件中知道。

对于backbone事件，没有事件冒泡这样的事情。它是变量本身，包含使其对 .on('boom', function(){});

做出反应的信息

四种解法：

全局变量
在 DOM 元素上触发，本质上是 "global"（从 JS 的角度来看）
通过连续的参数传递它
使用AMD

1 - 全局变量：

// File1
window.page_object_test = {};
_.extend(window.page_object_test, Parse.Events);
window.page_object_test.trigger("boom");

// File2
window.page_object_test.on('boom', callback); // Always prefer `on` over `bind`, depreciated in most frameworks

据说全局变量很危险，但却是在全局范围内进行通信的唯一方式。他们需要谨慎操作。

例如：有 1 个全局对象存储整个应用程序状态：

var window.AppState = window.AppState || {};
window.AppState.page_object_test = {}; // etc.

2 - DOM 元素：

// File1
$('document').trigger('boom'); // or whichever jQuery selector

// File2
$('document').on('boom', callback);

如果您的活动实际上与 DOM 元素相关，这将更有意义。这种情况经常发生，但并非总是如此。

3 - 作为参数传递

// File2
var generate_listener = function(page_object_test, callback) {
  page_object_test = {};
  _.extend(page_object_test, Parse.Events);

  page_object_test.on('boom', callback);
  return page_object_test;
}

// File1
var page_object_test = {}; 
page_object_test = generate_listener(page_object_test, function(){
  // Do whatever you want here
});
page_object_test.trigger("boom");

这将问题转移到沟通 generate_listener 上，因此赢得的不多。

使用AMD

最后，看看 AMD，它旨在按照您的预期模块化您的应用程序（基本上，它会为您处理全局变量，确保您不会在错误的情况下使用它).

Backbone/Parse 事件范围

Backbone/Parse events scope

jquery

backbone.js

backbone-events

parse-platform