Question

我是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中完全删除它的前任（可能通过动画，至少在一点点，它们将共享屏幕空间）。我可以看到我的应用程序有两个区域：“navbar”和“content”（呈现来自给定路线的信息的区域）：

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

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

Answer 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 <!DOCTYPE html> <html> <head> //Head content here </head> <body> <nav id="navbar"></nav> <div id="content"></div> </body> </html>可以用于管理LoadingBar功能（将显示它）的其他情况的方法，并且在控制器的操作中，在显示视图后，您将隐藏加载栏。

这可能是您问题的最简单的样板。希望它有所帮助。

<强>更新

来自服务器的Html：

Marionette.Application

{{1}}启动后，它会＆＃34;附加＆＃34;区域，然后您可以在该区域管理您的视图。

Marionette可以管理路线吗？

1 个答案: