如何构建骨干应用程序？

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, 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天停留在这个

/*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}); 
    } 
}); 

})(); 

我的基本观点文件，请帮帮忙。

Answer 1

从我的经验建筑物主干应用程序，我把所有的导航逻辑里面appRouter。

尝试通过将你放在window.Application进入“”的路线，并进入appRouter.initialize各个位应用重组你。它可能会解决你的问题。例如这样的事情：

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); 

如果你想保持一切在一个iife

(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... 
); 

但是，这很混乱，对吧？这就是为什么捆扎机存在:)