无需重新加载即可更新动态段

时间:2012-12-11 22:29:12

标签: routing ember.js

我想创建两个路线的“搜索”页面:

/ index - 默认路由
/:time/:filter搜索 - 用户输入一些参数后的路线,段filter被手动序列化/反序列化

目前我正在使用transitionTo在这些路由之间转换,但是我想停止这样做,因为它重新渲染(重新插入?)整个应用程序。

我想做什么:更改网址(从//:time/:filter或仅更新:time:filter段),但保留当前状态应用。

这样的事情可能吗?

Ember.js版本:1.0.0-PRE.2
JsFiddle:http://jsfiddle.net/hKzG9/2/

1 个答案:

答案 0 :(得分:2)

您正在寻找的技术是嵌套出口。模板可以有任意数量的插座,插入插座的模板也可以自己的插座。在您的示例中,您始终在进入新状态时连接应用程序模板插座。这是导致整个应用程序重绘的原因。

实际上,你想要的是你的HomeView的模板也有一个插座。您将使用HomeView实例填充应用程序模板中的插座,HomeView现在有自己的插座。当您执行搜索(并进入search状态)时,您将连接HomeView模板内的插座与另一个视图以显示结果。

我已经更新了你的小提琴以反映这一点:http://jsfiddle.net/hKzG9/3/

您的data-template-name="app-page-home"现在有{{outlet}}部分,我添加了data-template-name="app-results"以及匹配的视图和控制器。

search州,您会看到我现在第二次拨打router.get('homeController').connectOutlet('results')而不是router.get('applicationController').connectOutlet('home')

这将使已经可见的搜索控件不再重绘,并为搜索结果插入新区域。