0

我是 Backbone 的新手，我正在努力解决一些问题。我正在尝试使用 jQuery mobile 和 Backbone 构建一些东西。请在下面找到我的代码

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

当视图被实例化而不是渲染（在 Backbone View 构造函数中）时，使用 jQuery 连接事件。当从页面中删除 html（可能在 中$.mobile.changePage）时，jQuery 会断开这些事件。

因此，第二次渲染页面时，事件将不会重新连接。您可以尝试再次调用page.delegateEvents()手动连接事件，或者您可以每次都重新创建视图。

于 2013-03-18T17:58:52.357 回答