0

私はこのようなコードを持っています。ボタンをクリックすると、数回しか機能しません。Chromeはボタンにイベントリスナーがないと言っています。ただし、Viewはボタンを作成し、Viewにはクリックイベントがあります。手伝って頂けますか？

//buttons view
var NavigateBar = Backbone.View.extend({    
    events : {
        'click button#back' : 'onBack',
        'click button#next' : 'onNext',
        'hover' : function() {console.log('hover on navigate')}
    },
    initialize: function(options) {
//buttons html
        this.backDiv = '<button id="back" class="btn btn-primary btn-large pull-left">Back</button>';
        this.nextDiv = '<button id="next" class="btn btn-primary btn-large pull-right">Next</button>';
//save options
        this.back = this.options.back;
        this.next = this.options.next;
    },
//buttons event
    onBack : function(e) {
        e.preventDefault();
        app.navigate(this.back, {trigger: true});
    },
    onNext : function(e) {
        e.preventDefault();
        app.navigate(this.next, {trigger: true});
    },
//render
    render: function() {
        this.$el.html("");
        this.$el.append(this.backDiv);
        this.$el.append(this.nextDiv);
        return this;
    }
    });

//create router class
    var AppRouter = Backbone.Router.extend({
    routes: {
        "" : 'home',
        ":id" : 'test'
    },
//create different views
   initialize:function () {        
        this.homeView = new NavigateBar({
//pass options to view
            back: "1",
            next: "2"
        });
        this.testView = new NavigateBar({
            back: "3",
            next: ""
        });
    },
//route actions
    home : function() {
        $('#view-goes-here').html(this.homeView.render().el);
    },
    test : function(e) {
        $('#view-goes-here').html(this.testView.render().el);
    }
});

//create app
$(function(){  
    app = new AppRouter();
    Backbone.history.start();
});
​

デモ： http： //jsfiddle.net/3Jaru/3/、次のボタンを2回クリックすると、次のように表示されます。

4

1 に答える 1

1

ビューへの参照を存続させているため、jQueryがイベントを再バインドしようとしたときに、問題が発生しません。原則として、initializeメソッドでビューへの参照を定義することはありません。親メソッドがビューの新しいインスタンスを要求したときにビューが上書きされるように、常にその外側にあります。

home: function () {
    view = new NavigateBar({
        back: "1",
        next: "2"
    });
    $('#view-goes-here').html(view.render().el);
    // and if you really want to be able to reference it
    this.homeView = view;
},
test: function (e) {
    view = new NavigateBar({
        back: "3",
        next: ""
    });
    $('#view-goes-here').html(view.render().el);
    // and if you really want to be able to reference it
    this.homeView = view;
}

より良いアプローチは、ビューが定義されている場合は、それを破棄して次のようにすることを常に確認することです。

home: function () {
    /* create a method on the NavigateBar view to clear anything 
     * that needs clearing, such as model binds or funky events
     */
    this.homeView && this.homeview.destroy(); 
    view = new NavigateBar({
        back: "1",
        next: "2"
    });
    $('#view-goes-here').html(view.render().el);
    this.homeView = view;
},
于 2012-05-21T13:42:42.300 に答える