Question

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

我正在构建一个允许用户选择某些报告的用户界面，因此在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

Answer 1

将这2美分投入到这个主题中。请注意我在生产中使用此方法，它运行正常。实际上这个问题有2个部分。

<强> 1。我如何拥有多个动态细分？

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

为什么我觉得这很麻烦？

路线是一种在Ember中分离关注点的方法。在这种情况下，我没有看到单独的担忧。在我看来，您正在尝试镜像URL中表单的状态。我认为它应该是一个负责关注“形式状态”的途径。因此，我建议您查看以下帖子，其中我描述了如何为每个路由实现多个动态参数：Is resource nesting the only way to enable multiple dynamic segments?

<强> 2。如果只更改了表单中的一个参数，如何触发序列化挂钩来更新URL？

问题是只有在使用新模型输入路线时才会触发serialize hook。我猜你有一些逻辑，它处理更改参数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：您可以查看我的制作应用here 。这个应用程序显示在德国电影院最好的电影。即使您不懂德语，也可以单击顶部区域中的某个控件，然后查看更新的URL。我想这几乎和你想要的一样吗？

Answer 2

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

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

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

理论上，您可以在输入路径时解析查询字符串，然后相应地更新模型。根据我的理解，当通过直接更改URL或单击链接导航到路径时，将调用路径的model（）函数。

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

http://jsbin.com/abadet/7

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

Answer 3

有几种方法可以在ember中完成这项工作。如果您需要为可能传递给报表的misc参数提供很大的灵活性，请查看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

如何维护页面状态，以便您可以使用emberjs提供永久链接？

3 个答案: