2

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

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

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

在#top 和#bottom 中都有一个小导航，可以独立更改#top 和#bottom 的内容。ember的方法是什么

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

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

4

1 回答 1

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“模型”选择子视图。

于 2013-02-20T17:09:14.590 回答