Question

enter image description here

我刚刚开始学习EmberJS并且仍然在寻找标准的做事方式。

我想知道EmberJS中是否有类似上图的内容。我有一个页面有2帧最初隐藏。

如果单击第1帧或第2帧的按钮，则会显示相应的帧。这可以通过使用点击处理程序和css show / hide来完成。

我想使用路线来处理它。因此，如果我只打开第2帧并共享链接，则其他用户会看到相同的内容。 2帧同样的事情。

以下是我试图获得的不同路线

/  (Picture 1)
/frame1 (Picture 2)
/frame2 (Picture 3)
/frame1/frame2  or /frame2/frame1 (Picture 4)

我知道如何获得前3张照片。但第四个是棘手的。我正在考虑使用与2种组合相匹配的2资源/路线。但是创建链接也很困难，因为我不确定正常的linkTo帮助程序是否可以正常工作。

所以我真的遇到了两个问题 -

如何在模板中为图片4创建链接。我是否需要创建自定义助手？
使用路线显示两个框架作为图片4打开。

更新1 这是我到目前为止的demo。

更新2 在 this 更新版本中，我已经获得了所有4个网址组合。但链接只会转到/ frame1和/ frame2。您需要手动将栏中的地址设置为/ frame1 / frame2或frame2 / frame1才能看到它的工作原理。我想这个问题已经解决，但需要找出第一个问题。

Answer 1

您可以使用查询参数https://github.com/emberjs/ember.js/pull/3182。是您应该激活的功能https://github.com/emberjs/ember.js/blob/master/FEATURES.md

Answer 2

我在@Edu的帮助下解决了我的问题。查询参数是要走的路。网址与我上面指定的网址不完全相同。他们就像

/#/?frame1
/#/?frame2
/#/?frame1&frame2
/#/?frame2&frame1

这很好，因为我只想通过URL共享应用程序的视图状态。这是 demo link

这是代码

<强>的Javascript

Ember.FEATURES["query-params"] = true;
var App = Ember.Application.create();

App.Router.map(function() {
  this.route('app', { path: "/", queryParams: ['frame1', 'frame2'] });
});

App.AppRoute = Ember.Route.extend({
  renderTemplate: function(controller, context, queryParams) {
      if(queryParams.frame1) {
          this.render('frame1', { outlet: 'frame1' });
      }
      if(queryParams.frame2) {
          this.render('frame2', { outlet: 'frame2' });
      }
  }
});

LinkTo Helpers

{{#linkTo "app" frame1=true}}Frame 1{{/linkTo}}
{{#linkTo "app" frame2=true}}Frame 2{{/linkTo}}

在EmberJS中显示路由器的多个帧

2 个答案: