2012-02-09 2 views
0

私は初めてSpine.jsを試していますが、現在jQueryを使用している既存のjsファイルを変換しています。Spine&jQueryを使用したグローバルイベントへのバインド

これは、現在、このようなことが行われます。文書でトリガーされるイベントと、その後.myElementへのonclickをアタッチ:それは基本的に「準備のFacebook」を待って

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

を。

これまでのところ、私はコントローラのマニュアルを参照して、以下のことにより、定期的なイベントを行うことができました、http://spinejs.com/docs/controllers

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

脊椎に古いコードを変換する正しい方法は何ですか?また、関連する質問として、名前空間に使用するグローバルオブジェクトがあるため、ドキュメントではなく、「facebook:ready」イベントを添付する方が良いでしょうか?


私が考えていたことは、「facebook:ready」が発生したときに設定されるフラグを持つことができたということでした。次に、通常のSpine.Controller構文を使用して.myElementにクリックハンドラをアタッチし、クリックがトリガされたときに、そのフラグが設定されているかどうかを確認します。私はこれがこれについて最善の方法であるかどうか確信しています...

答えて

1

Facebook:readyイベントはSpineから起こるものなので、イベントハッシュでは処理できません。イベントハッシュ内のアクションは、コントローラがアクティブな要素にスコープされます。

Spineでは、イベントの属性に限定されません。あなたは何でも好きなものを使うことができます。イベントハッシュは単なるショートカットです。より複雑なものを設定するには、コンストラクタで何かできることがあります。

Facebookのイベントが発生したときに、自分のアプリの階層と自分自身を更新する必要があるコントローラの数がわかりません。しかし、ただ1つのコントローラだけがそれを監視し、他のロジックをトリガする必要がある場合に、起こったことを他のコントローラに知らせると仮定しよう。

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のソースから多くを学ぶことができるので、特に学ぶ価値があります。

+0

助けてくれてありがとう@SpoBo ...私はフラグを使用して解決できましたが、フラグが設定されていればイベントから戻ってきましたが、これはMVCの使用方法を理解するのに役立ちますMVCに)...それは現時点では完全にはっきりしていませんが、私はこれをシンクにする必要があると思っています。 – uglymunky

+0

私はそれをひどく説明している可能性があります:pAlex Mccawの本はjavascriptアプリケーションで役に立ちます。 http://shop.oreilly.com/product/0636920018421.do – SpoBo

+0

最高のアドバイスは、掘り下げてあなたが見るすべてを理解しようとすることです。盲目的に足場コードを信用してはいけません(実際には使用しないでください)。すべてが何をしているのかを学び、なぜそれがどのようにそれをするのかを尋ねる私も背骨に手を振っていて、イホの背骨ははるかに理解しやすいです。 – SpoBo

関連する問題