Question

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

结构是这样的（使用Haml）：

#dashboard
  #top
    %nav
    .content
  #bottom
    %nav
    .content

在＃top和#bottom中都有一些导航可以独立地改变#top和#bottom的内容。

的余烬是什么？

加载仪表板的初始状态（使用#top和#bottom的默认内容）
使用相应的导航为#top或#bottom加载新内容。将新内容加载到#top不应更改或删除#bottom中已存在的内容，反之亦然。

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

Answer 1

如果您希望将这些各种仪表板状态设置为可路由（可表示为URL），则需要提供允许独立导航的URL方案。假设顶部和底部各自可以将“foo”，“bar”或“baz”作为当前窗格。我建议

/dashboard/foo;bar

或

/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'))
    };
  }
});

然后，在DashboardController中，您可以根据DashboardPages“型号”选择子视图。

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

1 个答案: