0

DOMのイベントについて2つの質問があります。

DOMでイベントをトリガーしたいので、次のコードを記述しました。

window.homeView = Backbone.View.extend({
    el : $('#home-container'),

    initialize : function() {
       this.template = _.template($('#home-template').html());
       this.render();
    },

    events: {
      "click a.fb_connect": 'fetch_user'
    },

    fetch_user: function(){
        console.log("Fetch requested...");
    },

    render : function() {
        this.delegateEvents();
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    }

});

リンクをクリックして<a class="fb_connect" href="#"><img src="img/fb-connect.png" alt="fb-connect" /></a>も何も起こりませんでした...理由はわかりませんが、何か考えはありますか？

別の質問ですが、「カスタムイベント」について聞いたのですが、ここでやりたいのはFacebookログインに関するイベントをトリガーすることです。そのため、私の例では（機能しません）、リンクをクリックしてイベントを呼び出します。 、しかし、データを確実に取得するために、Facebookコールバックでイベントを呼び出す必要があります。問題は、FacebookコールバックがDOMイベントではないため、どのようにトリガーするかわかりません。これらの「カスタムイベント」を使用する方法はありますか。 「こういうことをするの？

ご協力いただきありがとうございます ！

編集： http： //jsfiddle.net/ludoblues/japNK/3/

4

2 に答える 2

1

問題は、リンクがビューによって定義された要素の一部ではないことです。

テンプレートとしてこれがあります：

<script type="text/template" id="home-template">
            <span><%= id %></span>
            <span><%= username %></span>
            <span><%= facebook_id %></span>
            <span><%= facebook_token %></span>
</script>

これには、イベントを添付する要素は含まれていません。

Backboneのイベントハッシュを介したイベントのアタッチは、onjQueryからのメソッドのデリゲート機能を使用して機能しますが、テンプレートが実際にDOMにアタッチされている（したがってアクセス可能である）時期を知らない（または知りたい）ため、 Backboneによって作成された周囲の要素。この場合、次のように定義されます。el : $('#home-container')

したがって、Backboneがイベントをアタッチするとき、それは以下を使用します。

this.$el.on("click", "a.fb_connect", this.fetch_user);

this.$elラップされたjQueryはどこでel提供されますか（または、、、およびelの組み合わせから生成されます）。tagNameclassNameid

<a class="fb_connect"...></a>はクリックイベントの子ではないため、<div id="home-container>jQueryはの子であるクラスのアンカータグのクリックイベントのみをリッスンしているため、発生することはありません。fb_connectdiv#home-container

テンプレートを次のように変更した場合：

<script type="text/template" id="home-template">
            <span><%= id %></span>
            <span><%= username %></span>
            <span><%= facebook_id %></span>
            <span><%= facebook_token %></span>
            <a href="#" class="fb_connect">OK !</a>​
</script>

できます。（フィドルで確認済み）。

これは、これをより詳細に説明するのに役立つfromjQueryのドキュメントです。.on

そして更新されたjsfiddle

于 2012-10-09T18:14:00.520 に答える
0

最初の質問については、この回答をご覧ください。DOMの準備が整うのを待ちましたか？

2つ目は、バックボーンビューでモデル/コレクションイベントに依存できない場合は、pub/subライブラリを使用することをお勧めします。これは私の好みです。

于 2012-10-09T16:58:47.757 に答える