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＆amp; amp;绑定到全球事件jQuery的

1 个答案: