具有多个入口点的木偶应用程序

Question

目前我正在构建的应用程序是具有单个入口点的单页木偶应用程序。当用户在“/”时，我传递了一个非常简单的jade文档：

 body

    header

    section
        div#main

script(src='/javascripts/lib/require.js', data-main='/javascripts/application.js')

我要加载到此页面的唯一 javascript 是我的 require.js 页面，一旦加载，我会从 Backbone.Marionette.Application() 开始，这是我为整个应用程序创建的唯一应用程序对象，它会处理所有事情。

define([
  'zepto', 'marionette', 'router', 'events'],
function ($, Marionette, router, Event) {
    // set up the app instance
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
      main: "#main"
    });

    MyApp.addInitializer(function(){

    });

    MyApp.on("initialize:after", function(){
        var newRouter = new router(MyApp);
        Backbone.history.start();
    });

    MyApp.start();
    return MyApp;

});

如果我有多个入口点（换句话说，在服务器端创建了多个 html 页面），例如一个用于“课堂”，一个用于“用户配置文件”，一个用于“讨论”，这是否意味着我需要单独的要求要为每个页面加载的 .js 文档和单独的 Backbone.Marionette.Application() 对象？

Answer 1

你不必这样做，否则太麻烦了:) 那是 Route 的工作。

首先，不要在应用定义中立即启动应用。删除此行

MyApp.start();

然后，将这样的命令放在你的 html 页面的页脚，最好在 dom 准备好之后

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

第三个是最重要的。您需要在应用程序或子应用程序中定义您的路线（更好）。这是从 BBCloneMail 中“借来”的代码

BBCloneMail.module("ContactApp", {
  startWithParent: false,
  define: function (ContactApp, App, Backbone, Marionette, $, _) {

    var Router = Marionette.AppRouter.extend({
      before: function() {
        App.startSubApp("ContactApp", {});
      },

      appRoutes: {
        "contacts": "showContacts"
      }
    });

在上述情况下，当访问者从 example.com/contacts 进入您的应用时，showContacts 方法将被触发，这就是您安排页面特定逻辑的开始。

有关 appRouter 的更多信息： https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.approuter.md