0

私はバックボーンの完全な初心者であり、いくつかのことに頭を悩ませようとしています。jQuery モバイルとバックボーンを使用して何かを構築しようとしています。以下の私のコードを見つけてください

var WelcomePage = Backbone.View.extend({
        initialize:function () {
            this.template = _.template($("#welcome_template").html());
        },

        render:function (eventName) {
            $(this.el).html(this.template());

            return this;
        },

        events:{
            "click .btn_continue"   : function(){
                appRouter.navigate('login',{trigger: true});
            }
        }
    });

var Login = Backbone.View.extend({
        initialize:function () {
            this.template = _.template($("#login_template").html());
        },

        render:function (eventName) {
            $(this.el).html(this.template());

            return this;
        },

        events:{
            "click .btn_login"  : function(){
                appRouter.navigate('dashboard',{trigger: true});            
            }
        }
    });

var Dashboard = Backbone.View.extend({
        initialize:function () {
            this.template = _.template($("#dashboard_template").html());
        },

        render:function (eventName) {
            $(this.el).html(this.template());

            return this;
        },

        events:{
            "click .btn_loadImages" : function(){
                console.log('load Images');
            }
        }
    });


var Router = Backbone.Router.extend({
        routes:{
            "":"welcome",
            "login":"login",
            "dashboard":"dashboard",
        },

        initialize:function () {
        },

        welcome:function () {
            this.changePage(new WelcomePage());
        },

        login:function () {
            this.changePage(new Login());
        },

        dashboard:function(){
            this.changePage(new Dashboard());
        },

        changePage:function (page) {
            $(page.el).attr('data-role', 'page');
            page.render();
            $('body').append($(page.el));


            $.mobile.changePage($(page.el), {changeHash:false, transition: 'slide'});
        }

    });

    var appRouter = new Router();
    Backbone.history.start();

ここで、BACK キーを使用して画面を行ったり来たりしながら、上記のコードを使用してイベントが発生します。次に、ルーターのコードを以下のコードに置き換えてみました

    var Router = Backbone.Router.extend({
            routes:{
                "":"welcome",
                "login":"login",
                "dashboard":"dashboard",
            },

            initialize:function () {
            },

            welcome:function () {
                this.changePage(v_WelcomePage);
            },

            login:function () {
                this.changePage(v_Login);
            },

            dashboard:function(){
                this.changePage(v_Dashboard);
            },

            changePage:function (page) {
                $(page.el).attr('data-role', 'page');
                page.render();
                $('body').append($(page.el));


                $.mobile.changePage($(page.el), {changeHash:false, transition: 'slide'});
            }

        });

        var v_WelcomePage = new WelcomePage();
        var v_Login = new Login();
        var v_Dashboard = new Dashboard();

var appRouter = new Router();
        Backbone.history.start();

前の画面に戻ると、イベントの発生が停止していることに気付きました。ルーターのアクションでビューのインスタンスを作成する代わりに、外部で作成して毎回呼び出しました。何らかの意味があることを願っています。

アドバイスをいただければ幸いです。

4

1 に答える 1

1

（バックボーンビューコンストラクター関数で）ビューがレンダリングされるのではなく、インスタンス化されるときに、イベントはjQueryを使用してフックアップされます。jQueryは、htmlがページから削除されると（おそらくで$.mobile.changePage）、これらのイベントを切断します。

したがって、2回目にページをレンダリングするときに、イベントがフックバックされることはありません。呼び出しpage.delegateEvents()てイベントを手動で再度フックするか、毎回ビューを再作成してみてください。

于 2013-03-18T17:58:52.357 に答える