2

私はbackbone.jsを学び、ついにいくつかのコードをまとめました。ここではすべてがいじくり回されています。

問題は正確には、と思いますevents。のビュー機能をトリガーしていませんclick。

それを機能させる方法は？「落とし穴」がありませんか？

4

3 に答える 3

3

ビューは、バインドされている DOM 要素から発生するイベントをリッスンします。

ビューをどの要素にもバインドしていません。これは、ビューの要素がdiv実際にはどこにも配置されていない空であることを意味します。そのため、イベントがビューに到達することはありません。あなたがする必要があるのは、ボタンから来るイベントを聞く要素にビューをバインドすることです。

elボタンを含むようにビューを設定してください。

http://jsfiddle.net/Vr8Q9/3/

于 2012-09-09T09:13:03.777 に答える
1

追加のクレジットと物事をより面白くするために:-)、実際にはel、イベントを適切に委任するために Backbone.View を明確に定義する必要はありません。たとえば、次のようにします。

MyView = Backbone.View.extend({
    // The events to delegate
    events: {
        'click #test':'onClick'
    },
    initialize: function() {
        // delegateEvents() actually happens in constructor, before render()
        // At this point there is no #test
    },
    render: function() {
        // By default, el is an empty div
        this.$el.html('<button id="test">testButton</button>');
        return this;
    },
    onClick: function(event) {
        console.log('clicked');
    }
});

view = new MyView();
$('body').append(view.render().el);  // We append this view to end of body

前のコードでは、(明示的に) を定義していませんでしたel。覚えておくべき最も重要なことは、明示的なel. むしろ、それは@jakeeがここで言っていることです：

ビューは、バインドされている DOM 要素から発生するイベントをリッスンします。

ビュー内で渡すか定義するイベント ハッシュは、ビュー内でリッスンされます。それが定義済みの div であるelか一般的な div であるかに関係なく、その中のものをリッスンし、イベント ハンドラーをデリゲートするため、ハンドラーはthisビューをポイントし続けます。良い。

次のようなことをした場合：

$('#test').remove();
$('body').prepend('<button id="test">Second Test</button>');

#test がビューの外にあることがわかります (ボディの最後に追加された一般的な el です。クリックしても何も起こりません。しかし、最もクールなのはこれです。

$('#test').remove();
$('div:last').html('<button id="test">Third Test</button>');

このコードでは、本文の上部にある #test を削除し、ビューに再度追加しました。それをクリックすると、その機能が再開されonClick()ます。

于 2012-09-09T11:07:46.073 に答える
1

elプロパティを設定してビューのコンテナを定義する必要があります。その後、期待どおりに機能します。

Backbone.View.extend({
    el: "body",
    events: {
        "click #add-contact": "addContact",
        "click #test": "alertMe"
    },

更新されたフィドル: http://jsfiddle.net/fAB28/1/

于 2012-09-09T09:07:25.220 に答える