[英]How do you maintain the page state, so that you can provide permalinks using emberjs?
我不能很好地了解你如何支持永久链接。 这可能仅仅是因为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
把我的2美分投入到这个主题中。 请注意, 我在生产中使用这种方法 ,它工作正常。 实际上这个问题有2个部分。
1.我如何拥有多个动态细分?
Mike Grasotti使用嵌套资源描述了一种方法。 这种方法有效,但我认为这种方法在这种情况下有点麻烦。
为什么我认为这很麻烦?
路线是分离Ember关注点的一种手段。 在这种情况下,我没有看到单独的担忧。 在我看来,您正在尝试镜像URL中表单的状态。 我认为它应该是一个负责关注“形式状态”的途径。 因此,我建议查看以下帖子,其中我描述了如何为每个路由实现多个动态参数: 资源嵌套是启用多个动态段的唯一方法吗?
2.当您在表单中只更改了一个参数时,如何触发序列化挂钩来更新URL?
问题是只有在使用新模型输入Route时才会触发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: 您可以在这里查看我的制作应用程序 。 这个应用程序显示在德国电影院最好的电影。 即使您不懂德语,也可以单击顶部区域中的某个控件,然后查看更新的URL。 我想这几乎和你想要的一样?
我也想知道如何做到这一点。 由于我们想要共享链接,因此数据必须包含在URI中,但您不希望将应用程序位置与应用程序状态混淆。
哈希: #/reports/10
将是告诉应用程序去哪里所需的最少信息。 所有其他独立于位置的数据应该可以放在URI的搜索部分。 我会建议这样的事情:
#/reports?metrics=impressions&start=10-08-2013&end=11-08-2013
理论上,您可以在输入路径时解析查询字符串,然后相应地更新模型。 根据我的理解,当通过直接更改URL或单击链接以导航到路径时,将调用路径的model()函数。
不幸的是,在实践中,这并不像我预期的那样有效。 我不确定它是否只是JSBin,但是有一些奇怪的行为,其中带有额外应用程序数据的链接实际上没有导航,这是永久链接的全部要点。 请注意,如果您按照JSBin中的说明操作,则会从网址而不是默认值中获取开始日期和结束日期。 这个概念可以扩展为使用findQuery等发送对不同模型数据的额外请求,因此几乎任何事情都是可能的。
无论如何,它可能会给你一些想法。
有几种方法可以在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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.