3

ビューを作成してダイアログを開くたびに、ダイアログが開かれた回数であるn一連のイベントを取得します。n以下のサンプルでは、​​クリックするたびにfooButtonボタンnクリック イベントが発生します。イベントのバインドを解除することになっていることはわかっていますが、機能しthis.undelegateEvents()ていません。

SimpleDialog (および他のダイアログ ウィジェットの動作) の方法について私が理解していることから、ダイアログの作成時に div の内容が別の要素にコピーされ$dialog = this.$el.modal();ます。その上でundelegateEvents。このアプローチも機能していません。

何か案は？

MyDialogView = Backbone.View.extend({
    initialize: function(options){
        this.render();
    },
    render: function() {

        this.$el.empty().append("<button id='fooButton'>Foo</button>");

        this.$el.modal({ "static": true });
    },
    events: {
        "click #fooButton": "fooPressed"
    },
    fooPressed: function() {
        alert("clicked");

        $.modal.close();
    }
});

$(function(){
    $("#openDialog").click(function() {
        new MyDialogView({el: $("#dialog") });
    });
});

助けてくれてありがとう!

JQuery UI ダイアログに切り替えることで解決しました。以下の私の答えを見てください。

4

6 に答える 6

3

ビューをインスタンス化するたびに、Backboneはあなたを呼び出しdelegateEventsますel：

デリゲートイベント delegateEvents([events])

[...]デフォルトでは、delegateEventsはビューのコンストラクター内で呼び出されます[...]

したがって、これを行うたびに：

new MyDialogView({el: $("#dialog") });

jQuerydelegateをにアタッチしています#dialog。delegateあなたの問題はあなたがあなた自身の後で片付けをしていないということです、あなたがダイアログをシャットダウンするときあなたはを取り除くべきです。

undelegateEventsダイアログを閉じるときに電話をかける必要があります。

fooPressed: function() {
    alert("clicked");
    this.undelegateEvents();
    $.modal.close();
}

または、ビューを1回作成し、メソッドを呼び出して必要に応じてポップアップすることもできます。設定が完了したら、renderからの呼び出しをinitializeすべてnew MyDialogView(...)1回だけドロップし、ビューを変数に保存してから、my_dialog_view.render()必要に応じて保存します。

于 2012-12-23T23:34:25.233 に答える
1

What version of Backbone are you using? As of 0.9.9:

Most importantly, Backbone events have two new methods: listenTo and stopListening. These are an inversion-of-control flavor of the usual on and off, and make it a little easier to clean up all events that an object is listening to on other objects. When you destroy Views with view.remove(), this will now be done automatically. Note that the usual rules about programming in a garbage collected language still apply.

I would guess that every-time you open your modal, your close button should call view.remove(). As of the latest version, Backbone should now unbind all events from the view, without you having to do it manually.

MyDialogView = Backbone.View.extend({
    initialize: function(options){
        this.render();
    },
    render: function() {

        this.$el.empty().append("<button id='fooButton'>Foo</button>");

        this.$el.modal({ "static": true });
    },
    events: {
        "click #fooButton": "fooPressed",
        "click #close": "closeView"
    },
    closeView: {
      this.remove();
      $.modal.close();
    },
    fooPressed: function() {
        alert("clicked");
    }
});
于 2012-12-24T15:57:09.250 に答える
0

this間違ったスコープで使用することによる問題なので、この場合thisはビューインスタンスではなくメソッドを参照しています。これは、ビューのイベントを削除するために以前に行った方法であり、うまく機能します。

var JobContainerNumberView = Backbone.View.extend({
events: {
        "focusout input.txtNumber": "checkBookingExists"
    },
    checkBookingExists: function() {
        var _this = this;
        var this_input = _this.$('input.txtNumber'); // text box where container is
        var booking_number = this_input.val();
        if ( booking_number != '') {
            $.post('booking/booking_exists', {'booking_number': booking_number},
                function(data,status,xhr) {
                if (data.exists) {
                    alert(data.message);
                    // stop only focusout event for the input
                    $(_this.el).off('focusout', 'input.txtNumber');
                    //remove all events on view
                    //_this.undelegateEvents();
                }
            },'json');
        }
    }

});

于 2014-11-20T07:38:30.150 に答える
0

MyDialogViewクリックごとに新しいインスタンスを作成せず、'#openDialog'既存のインスタンスをレンダリングするだけだとしたら?

MyDialogView = Backbone.View.extend({
    initialize: function(options){
        //this.render(); // don't need to call it here
    }
    // ...
});

$(function(){
    var myDialogView = new MyDialogView({
        el: $("#dialog")[0]
    });
    $("#openDialog").click(function() {
        myDialogView.render();
    });
});
于 2012-12-23T22:32:03.927 に答える
0

私の同僚のアントンは、Simple Modal を this.$el に安全に割り当てることができる要素を返す JQuery UI Dialog に置き換えることで解決策を見つけました (Simple Modal ではできませんでした)。オープン時:

that.$el = $(that.$el.dialog({
    modal: true,
    resizable: false,
    "beforeClose": function (dialog) {
        that.stopListening();
        that.undelegateEvents();
    }
}));

助けようとしたすべての人にもう一度感謝します。これが将来誰かに役立つことを願っています。

于 2012-12-24T04:15:36.357 に答える
0

offjQueryのメソッド を使ってみてはどうでしょうか?

unbindEvents : function(){
    this.$el.off();
}
于 2012-12-23T22:30:22.617 に答える