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

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

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

作出反应的信息

四种解决方案：

全局变量
触发DOM元素，本质上是“全局”（从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

全球变量被认为是危险的，但却是在全球范围内进行沟通的唯一方式。他们需要谨慎操纵。

Ex：拥有一个存储整个app状态的全局对象：

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，它是为了模仿您的应用程序而设计的（基本上，它会为您处理全局变量，确保您不会在错误的情况下使用它）。

Answer 2

你有没有考虑过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');

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

Backbone / Parse事件范围

2 个答案: