7

我无法很好地了解您如何支持永久链接。这可能仅仅是因为 emberjs 不支持永久链接。

我正在构建一个允许用户选择某些报告的 UI，因此在 ember 中这很容易，您只需添加一个接受 id 的路由“报告”，因此 URL 如下所示：

#/reports/10/

我需要的是一些额外的参数也存在于该 URL 中，例如开始和结束日期以及度量类型，例如

#/reports/10/metric/impressions/start/10-08-2013/end/11-08-2013

因此，如果我将这些参数粘贴到浏览器中，则需要获取这些参数，并且重要的是，当用户更改这些设置时，例如通过日期选择器，URL 应该更新以反映新参数。

编辑：

这是一个 jsbin 的链接，其中包含基于以下答案的解决方案。http://jsbin.com/ucanam/703

4

3 回答 3

8

只是把我的 2 美分投入到这个话题中。请注意，我在生产中使用这种方法并且效果很好。这个问题实际上有两个部分。

1. 如何拥有多个动态细分？

Mike Grasotti 使用嵌套资源描述了一种方法。这种方法有效，但我认为这种方法在这种情况下有点麻烦。

为什么我觉得很麻烦？

路由是在 Ember 中分离关注点的一种方式。在这种情况下，我没有看到单独的问题。在我看来，您正试图在您的 URL 中反映表单的状态。我认为这应该是负责“形式状态”问题的一种途径。因此，我建议查看以下帖子，其中我描述了如何为每个路由实现多个动态参数：资源嵌套是启用多个动态段的唯一方法吗？

2. 当您只更改表单中的一个参数时，如何触发序列化挂钩来更新 URL？

问题是serialize hook只有在使用新模型输入 Route 时才会触发。我猜你有一些逻辑，处理更改参数start或end. 我想在这种情况下您不会重新输入路线。那么在这种情况下如何再次触发序列化钩子来更新 URL 呢？我正在我的路由器中处理这样的事件，我正在使用以下代码：

var currentRouteName = this.controllerFor("application").get("currentPath");//the ApplicationController stores the name of the current Route
var url = App.Router.router.generate(currentRouteName);
App.Router.router.updateURL(url);

PS：您可以在这里查看我的生产应用程序。这个应用程序展示了德国电影院中最好的电影。即使您不懂德语，您也可以单击顶部区域中的控件之一并查看更新的 URL。我想这和你想要的差不多吧？

于 2013-08-15T08:59:17.963 回答
1

我也想知道如何做到这一点。数据必须放在 URI 中，因为我们要共享链接，但您不想将应用程序位置与应用程序状态混淆。

哈希：#/reports/10将是告诉应用程序去哪里所需的最少信息。与位置无关的所有其他数据可能应该放在 URI 的搜索部分。我会建议这样的事情：

#/reports?metrics=impressions&start=10-08-2013&end=11-08-2013

理论上，您可以在输入路线时解析查询字符串，然后相应地更新您的模型。据我了解，通过直接更改 URL 或单击链接导航到路线时，会调用路线的 model() 函数，这样就可以了。

不幸的是，在实践中这并没有像我预期的那样工作。我不确定它是否只是 JSBin，但有一些奇怪的行为，即与额外应用程序数据的链接实际上并没有导航，这是永久链接的重点。请注意，如果您按照 JSBin 中的说明进行操作，则开始日期和结束日期取自 url，而不是默认值。这个概念可以扩展为使用 findQuery 等发送对不同模型数据的额外请求，因此几乎任何事情都是可能的。

http://jsbin.com/abadet/7

无论如何，它可能会给你一些想法。

于 2013-08-10T20:46:00.303 回答
1

有几种方法可以在 ember 中完成此操作。如果您需要为可能传递给报告的其他参数提供很大的灵活性，请查看ember-query，它为 ember 应用程序添加了查询字符串支持。

另一种选择是使用嵌套资源。例如：

App = Ember.Application.create({});

App.Router.map(function() {
  this.resource('report', {path: '/reports/:report'}, function() {
    this.resource('metric', {path: '/:metric'}, function() {
      this.resource('start', {path: '/:start'}, function() {
        this.route('end', {path: '/:end'});
      });
    });

  });
});

App.StartEndRoute = Ember.Route.extend({
  model: function(params, transition){
    return transition.params
  }
});

<script type="text/x-handlebars" data-template-name="start/end">
<pre>
Report ID: {{report}}
metric: {{metric}}
start: {{start}}
end: {{end}}
{{log this}}
</pre>
</script>

有关工作示例，请参见此 jsbin

于 2013-08-13T22:23:25.793 回答