2

クリックイベントを特定の量の特別な div にバインドする必要があります。どの div をバインドする必要があるかは実行時にしかわからないため、これらすべての特別な div のクラスを設定して「イベント」にバインドするだけでよいと考えていましたが、いずれかをクリックします。これらの div はすべての div をトリガーし、イベントで変数を使用しようとしましたが、これらの変数は実行時にのみ認識されるため、イベントをバインドするときに未定義であることがわかりました実行時にバックボーン内のイベントをバインドするために jQuery を使用しています。しかし、ビューを初期化するたびに、イベントはすぐに発生します

var RoomNumber = Backbone.View.extend({
    el: $('#roomColumn' + this.roomNumber),
    initialize: function () {
        _.bindAll(this, 'render');
        this.user = this.options.user;
        this.roomNumber = this.options.roomNumber;
        this.render();
        //$('#roomNumber'+this.roomNumber).on('click', this.enterBooking());
    },
    render: function () {
        $(this.el).append("<div class = 'roomNumber' id  = 'roomNumber" + this.roomNumber + "'>" + this.roomNumber + "</div>");
    },
    enterBooking: function () {
        var slideForm = new SlideForm({
            user: this.user,
            roomNumber: this.roomNumber,
            state: 'book',
            singleSchedule: new Schedule()
        });
    }
});

なぜこれらが起こるのか、誰かが親切に説明してくれますか？また、イベントを動的に生成された div にバインドするにはどうすればよいですか?

(おそらく、このようなバックボーン ビューを使用するべきではなかったことはわかっていますが、これは要件の一部です)

4

2 に答える 2

3

コードには 2 つの問題があります。

  1. あなたのポイントに答えると、バインド中にイベントハンドラーを呼び出しているため、バインド時にイベントがトリガーされます。

    $('#roomNumber'+this.roomNumber).on('click', this.enterBooking());

    $('#roomNumber'+this.roomNumber).on('click', this.enterBooking);
    関数呼び出し中括弧に注意してください。

  2. あなたがelを設定した方法が間違っています

    el: $('#roomColumn' + this.roomNumber),
    バックボーンでは、メソッドが呼び出されるel前にビューのプロパティが設定されます。initializeこれは、バックボーンが予期しない要素を見つけようとすることを意味します$('#roomColumnundefined')。代わりに、el要素をオプションとしてビューに渡すことができます

        var roomNumber = 3;
    var view = new RoomNumber({
        roomNumber:roomNumber,
        el:$('#roomColumn' + roomNumber)
    });
于 2012-07-31T18:58:16.503 に答える
0 
......
//Pseudo code
render: function () {
    $(this.el).append("<div class = 'roomNumber' id  = 'roomNumber" + this.roomNumber + "'>" + this.roomNumber + "</div>");

    //you can dynamic set up events like this:
    this.events["click #roomNumber"+this.roomNumber] = "enterBooking";
    this.delegateEvents(this.events);

},
......
于 2012-07-31T02:26:17.003 に答える