Question

我是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();

我注意到当我回到之前的屏幕时，事件停止了。我没有在路由器的动作中创建视图实例，而是在外面创建了它，并且每次都调用它。我希望我能有所作为。

任何建议都非常感谢。

Answer 1

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

因此，第二次呈现页面时，事件将不会被挂起。您可以尝试调用page.delegateEvents()再次手动挂接事件，也可以每次重新创建视图。

创建单个视图实例时未触发的事件，但在创建多个实例时有效

1 个答案: