Как структурировать базовое приложение?

Question

Я создаю базовое приложение, которое занимается аутентификацией пользователя и после успешной аутентификации пользователя загружает основное приложение.

В главном приложении есть основной вид, который посвящен загрузке меню и базовому пользовательскому интерфейсу для приложения, а затем маршрутизатору перейдите к подзапросу страницы, который динамически загружает контент в контейнер, проблема заключается в том, что перемещение маршрутизатора вызывается перед базовым видом и базовый вид не может найти контейнер для добавления содержимого.

вот мой 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.

Попробуйте выполнить реструктуризацию приложения, передав различные биты, которые вы разместили в окне. Применение в маршруте «» и в 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... 
); 

Но это грязно, не так ли? Вот почему существуют связки: