使用Spine＆jQuery綁定到全局事件

Question

我第一次嘗試Spine.js，並且當前正在轉換使用jQuery的現有js文件。

目前，它確實是這樣的：

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

凡基本上等待的Facebook：準備好'事件要在文檔觸發，然後附加一個onclick到.myElement。

到目前爲止，我已經能夠通過以下對控制器的文檔做定期的活動，http://spinejs.com/docs/controllers

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

什麼是舊的代碼轉換爲脊柱的正確方法？而且，作爲一個相關的問題，由於我有一個用於命名空間的全局對象，最好是將我的'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來源學到很多東西。