Marionette 可以管理路线吗？答案

【问题标题】：Can Marionette manage routes?Marionette 可以管理路线吗？
【发布时间】：2014-12-02 17:19:24
【问题描述】：

我是 Marionette 的新手（虽然不是 Backbone），并决定使用它来管理我的路由。假设我有以下情况：

var AppRouterController = {
  //Route to the homepage
  home: function() {
    //Unload the existing route, and load this one instead
  },
  //Route to a user profile page
  user: function() {
    //Unload the existing route, and load this one instead
  },
  //Route to a list of tasks or something
  tasks: function() {
    //Unload the existing route, and load this one instead
  },
};

var TheRouter = new Marionette.AppRouter({
  controller: new AppRouterController(),
  appRoutes: {
    "home": "home",
    "user/:id": "user",
    "tasks/:date": "tasks"
  }
});

我希望我的应用动态加载每条新路由，并从 DOM 中完全删除其前身（可能通过动画，至少在一段时间内，它们将共享屏幕空间）。我可以看到我的应用有两个区域：“导航栏”和“内容”（来自给定路线的信息被呈现的区域”）：

<html>
  <body>
    <section region="navbar"></section>
    <section region="content" id="home|user|tasks|whateverRoute"></section>
  </body>
</html>

所以，我的 DOM 主体总是有两个孩子：导航栏区域部分和内容区域部分，无论 Marionette 中的当前活动路线是什么。在 Marionette 中管理此过程的最佳方法是什么？我的意思是，只在需要时抓取特定路径中的模块（而不是在加载时抓取它们），创建一个新的“内容”区域，并以平滑的方式替换现有的“内容”区域。

【问题讨论】：

标签： javascript backbone.js routes marionette

【解决方案1】：

在切换路线时使用App.content.show(yourViewInstance(params)) 并使用某种加载栏。示例：

var app = new Marinoette.Application.extend({
    showLoadingBar: function() {// your loadingBar logic here},
    hideLoadingBar: function() {// your loadingBar logic here},
    onRoute: function () {
       this.showLoadingBar();
       // other things needed to be done here
    }
}); 

app.addRegions({
  navigation: "#navbar",
  content: "#content"  
});

var AppRouterController = {
  //Route to the homepage
  home: function() {
    //Unload the existing route, and load this one instead
    // require app here to access regions via require.js or in other way.
    app.content.show(yourHomeViewInstance(collection_or_model_or_other_param));   
    app.hideLoadingBar();
  },
  //Route to a user profile page
  user: function(id) {
    //Unload the existing route, and load this one instead
    app.content.show(yourUserViewInstance(collection_or_model_or_other_param));
    app.hideLoadingBar();
  },
  //Route to a list of tasks or something
  tasks: function(date) {
    //Unload the existing route, and load this one instead
    app.content.show(yourTasksViewInstance(collection_or_model_or_other_param));
    app.hideLoadingBar();
  },
};

var TheRouter = new Marionette.AppRouter({
  controller: new AppRouterController(),
  appRoutes: {
    "home": "home",
    "user/:id": "user",
    "tasks/:date": "tasks"
  }
});

app.on('route', app.onRoute, app);

app.on('start', function () {
    Backbone.history.start();
})


app.start();

app.region.show 将管理重新渲染（关闭旧视图并附加新视图）进程。

任何时候你将导航到某个地方Marionette.Router 将触发'route' 事件，并且app.onRoute 将被调用（Marionette.Router 有它自己的onRoute 方法，可能对其他情况有用）这将管理 LoadingBar 功能（将显示它）并在控制器的操作中，显示视图后，您将隐藏加载栏。

对于您的问题，这可能是最简单的样板文件。希望对您有所帮助。

更新

来自服务器的 HTML：

<!DOCTYPE html>
<html>
<head>
  //Head content here
</head>
<body>
  <nav id="navbar"></nav>
  <div id="content"></div>
</body>
</html>

Marionette.Application 启动后，它将“附加”区域，然后您可以管理您在该区域中的视图。

【讨论】：

对应的 HTML 文件是什么？在加载任何内容之前，我是否已经需要为我的区域准备好 html，或者是否有一种首选的方式来动态创建它们并从一个空的主体开始？