Ember.js 在同一页面上处理两个独立的内容容器

我正在使用ember.js开发一个单页应用程序。我有一个包含两个不同内容部分的仪表板，它们彼此独立（因此它不是主/详细关系）

结构如下（使用Haml）：

在#top和#bottom中都有一个小小的导航，可以独立地更改#top和#bottom的内容。余烬之路是什么

加载仪表板的初始状态（默认内容为“顶部”和“底部”）

使用相应的导航为“顶部”或“底部”加载新内容。将新内容加载到#top中不应更改或删除#bottom中已经存在的内容，反之亦然

---

我还在学习ember.js。我希望这个问题有意义

如果您想使这些不同的仪表板状态可路由（可表示为URL），则需要提出一个允许独立导航的URL方案。假设顶部和底部的每个部分都可以有“foo”、“bar”或“baz”作为当前窗格。我建议

/dashboard/foo;bar

或

既然您已经选择了一个URL方案，那么您需要告诉路由器如何序列化和反序列化该方案。资源路由需要一个模型，因此我们将伪造一个：

App.DashboardPages = Ember.Object.extend({
  top:    Ember.required(),
  bottom: Ember.required(),
});

App.Router.map(function() {
  this.resource('dashboard', { path: '/dashboard/:pages' });
});

App.DashboardRoute = Ember.Route.extend({
  model: function(params) {
    // TODO: error handling for bad URLs

    var pages      = params.pages.split('+');

    return App.DashboardPages.create({
      top:    pages[0],
      bottom: pages[1]
    });
  },

  serialize: function(model) {
    return {
      pages: "%@+%@".fmt(model.get('top'), model.get('bottom'))
    };
  }
});

---

然后，在

仪表板控制器

中，您可以根据

仪表板页面

的“模型”选择子视图。

我没有解决的一个棘手问题是如何为每一半的导航部分建立链接。链接生成器必须知道另一个部分的当前状态。猜测资源路径应该是

{path:'/dashboard/:pages'}

，对吗？那么在

DashboardController

中，如何呈现子视图？通过

renderTemplate

渲染视图不是route的任务吗？在

路径上获得了很好的捕获；已修复。您的模板（或视图）必须使用
top
和
bottom
属性来选择要渲染的内容。很抱歉我的响应太晚。被其他项目分散了注意力。所以对我来说，棘手的部分似乎是如何以及在哪里为顶部和底部仪表板部件呈现正确的模板。我试图创建一个带有两个插座的
仪表板
模板
顶部
和
底部
，但我不知道在插座中渲染的位置。或者我是否需要
仪表板中的一些条件逻辑来呈现子模板？你会怎么做？
/dashboard/foo+bar

App.DashboardPages = Ember.Object.extend({
  top:    Ember.required(),
  bottom: Ember.required(),
});

App.Router.map(function() {
  this.resource('dashboard', { path: '/dashboard/:pages' });
});

App.DashboardRoute = Ember.Route.extend({
  model: function(params) {
    // TODO: error handling for bad URLs

    var pages      = params.pages.split('+');

    return App.DashboardPages.create({
      top:    pages[0],
      bottom: pages[1]
    });
  },

  serialize: function(model) {
    return {
      pages: "%@+%@".fmt(model.get('top'), model.get('bottom'))
    };
  }
});