Question

我正在创建一个处理用户身份验证的主干应用程序，并在成功验证用户加载主应用程序之后。

在主应用程序中有一个主视图，它处理加载菜单和应用程序的基本UI，然后路由器导航到页面子视图，动态地将内容加载到容器中，这里的问题是在基本视图之前调用路由器导航渲染和基本视图找不到容器来追加内容。

这是我的appinit.js

/*global App, $*/

(function(){

'use strict';

window.Application = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    Configs: {},
    init: function () {
        var token = Cookies.get("access_token");
        var router = new Application.Routers.Approuter;
        Backbone.history.start();
        //Check token to find if user is logged in or not 
        if(token!=undefined){
            //Load base view for app
            var appFrame = new Application.Views.Appframe;
        } else {
            //If user is not logged in load login view
            router.navigate('login', {trigger: true});
        }
    }
};

$(document).ready(function () {
    Application.init();
});

})();

我的路由器文件

/*global App, Backbone*/

Application.Routers = Application.Routers || {};

(function () {
'use strict';

Application.Routers.Approuter = Backbone.Router.extend({

    routes: {
        "login": "login",
        "logout": "logout",
        "products": "products"
    },

    login: function () {
        new Application.Views.Login();
        ReadyLogin.init();
    },

    products: function () {
        var productsView =  new Application.Views.Product;
        $('#page-content-data').html(productsView.el);
    },

    logout: function () {
        Cookies.remove('access_token');
        Application.Configs.Users.token = '';
        var router = new Application.Routers.Approuter;
        router.navigate('login', {trigger: true});
    }
});

})();

我的基本视图文件

/*global App, Backbone, JST*/

Application.Views = Application.Views || {};

(function () {
'use strict';

Application.Views.Appframe = Backbone.View.extend({

    template: JST['app/scripts/templates/appframe.ejs'],

    tagName: 'div',

    initialize: function () {
        _.bindAll(this, 'beforeRender', 'render', 'afterRender');
        var _this = this;
        this.render = _.wrap(this.render, function(render) {
            _this.beforeRender();
            render();
            _this.afterRender();
            return _this;
        });

        this.render();
    },

    beforeRender: function () {

    },

    render: function () {
        var self = this;
        var userModel  = new Application.Models.Users;
        userModel.fetch({ headers: {'Authorization' :'Bearer '+Application.Configs.Users.token} }).done(function () {
            self.$el.html(self.template(userModel.toJSON()));
        });
        return this
    },

    afterRender: function(){
        $('#page-container').html(this.el);
        //After appending base load products route 
        var router = new Application.Routers.Approuter;
        router.navigate('products', {trigger: true});
    }
});

})();

3天以来我一直坚持这个，请帮助。

Answer 1

根据我构建主干应用程序的经验，我将所有导航逻辑放在appRouter中。

尝试通过将放在window.Application中的各个位转移到“”路由并转换到appRouter.initialize来重构您的app。它可能会解决您的问题。比如像这样：

var AppRouter = new (Backbone.Router.extend({
routes: {
    "": 'home',
    "login": 'login'
},
initialize: function(){
    //everything you need to initialize you app
},
start: function(){
    Backbone.history.start();
},
home: function(){
//your initial routing logic (navigate to login if token is undefined)
},
login: function(){}
}));

$(function(){
AppRouter.start();
});

Answer 2

如果您在全局模块模式中使用了许多iife：

var router = (function() {
    return Backbone.Router.extend({ /** stuff... */ });
})();

var models = (function() {
    return Backbone.Model.extend({});
})();

//more stuff

(function(router, models) {
    var app = { router: router, models: models }; 
    //init inside the iife
})(router, models);

如果你想在一个生活中保留所有

(function(router, models) {
    var app = {
        router: router(),
        models: models()
    };
    //init in here
})(
    function router() {
        return Backbone.Router.extend({});
    },

    function models() {
        return {
            User: Backbone.Model.extend({}),
            Foobar: Backbone.Model.extend({})
        };
    },

    //etc...
);

但是，这很乱，对吧？这就是捆绑商存在的原因:)）

如何构建骨干应用程序？

2 个答案: