使用 Spine 绑定到全局事件jQuery

Question

我是第一次尝试 Spine.js，目前正在转换使用 jQuery 的现有 js 文件。

它目前执行类似以下操作：

$('document').bind('facebook:ready', function () {
    $('.myElement').click(callback);
});

它基本上等待文档上触发“facebook:ready”事件，然后将 onclick 附加到 .myElement。

到目前为止，我已经能够按照控制器文档 http://spinejs.com/ 来执行常规事件docs/controllers

myController = Spine.Controller.sub({
    el: $('#mainViewElement')
    , events: hashOfEventsToNamesAndHandler
});

将旧代码转换为 Spine 的正确方法是什么？而且，作为一个相关的问题，由于我有一个用于命名空间的全局对象，因此将我的“facebook：ready”事件附加到该对象而不是文档会更好吗？

---

我在想的一件事是，当“facebook:ready”触发时，我可以设置一个标志。然后，我使用正常的 Spine.Controller 语法将单击处理程序附加到 .myElement，当触发单击时，我检查是否设置了该标志，如果没有设置，我会立即返回。我只是不确定这是否是解决这个问题的最佳方法......

Answer 1

facebook:ready 事件是在 Spine 之外发生的事件，因此您将无法使用事件哈希来处理它。事件哈希中的操作的范围仅限于控制器处于活动状态的元素。

在 Spine 中，您不仅限于事件属性。你可以使用任何你想要的东西。事件哈希只是一个捷径。要设置更复杂的东西，你可以在构造函数中做一些事情。

我不知道您的应用程序的层次结构，也不知道当 facebook 事件触发时有多少控制器需要自行更新。但我们假设只有一个控制器会对其进行监视，并且它会通知其他控制器刚刚发生的情况......以防需要触发其他一些逻辑。

class FacebookIntegrationController extends Spine.Controller

  constructor: ->
    super

    # You can't use $ here because that is scoped to the current @el. So use the jQuery object itself.
    # What I would suggest is to just trigger a local action.
    jQuery('document').bind('facebook:ready', @facebookReady())

  facebookReady: (argument) =>
    # Here you can just handle it however you would like.

    # This works if .myElement is somewhere in the @el of this controller. But it isn't the nicest solution.
    $('.myElement').click(callback)

    # Instead write the code that's in the callback in this function. Or if the callback is passed along with the original event you can get to it as the arguments are passed along to the function (argument in this case).

    # If multiple controllers need to take action after the facebook:ready event has fired in the document you could also trigger a new event:
    @trigger('facebook:ready') # You could add optional arguments to trigger that get passed along to the functions that bind to it.

    # Other controllers or other Spine classes could listen for it by using:
    # FacebookIntegrationController.bind('facebook:ready', @localActionToTrigger)
    # If this doesn't work nicely for you you could also use global events by replacing @trigger with Spine.trigger and Spine.bind('facebook:ready', @localActionToTrigger)

未经测试的代码！！
编辑：实现的代码： http://jsfiddle.net/SpoBo/zAwKk/3/

为了我的代码的 CoffeeScriptness。它确实值得学习，特别是因为您可以从 Spine 源代码中学到很多东西。