0

在此处输入图像描述

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

我想知道在 EmberJS 中是否可以使用类似上图的内容。我有一个页面，最初隐藏了 2 个框架。

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

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

这是我尝试获得的不同路线

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

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

所以我真的有两个问题 -

  1. 如何在模板中创建图片 4 的链接。我需要创建自定义助手吗？
  2. 使用路线显示两个打开的框架，如图 4 所示。

更新 1 这是迄今为止我得到的演示。

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

4

2 回答 2

1

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

于 2013-11-06T12:58:12.457 回答
1

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

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

这很好，因为我只想能够通过 URL 共享应用程序的视图状态。这是演示链接

这是代码

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 "app" frame1=true}}Frame 1{{/linkTo}}
{{#linkTo "app" frame2=true}}Frame 2{{/linkTo}}
于 2013-11-07T00:26:54.883 回答