【问题标题】:Update dynamic segments without reload无需重新加载即可更新动态段
【发布时间】:2012-12-11 22:29:12
【问题描述】:

我想用两条路线创建“搜索”页面:

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

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

我想要做的:更改 url(从 //:time/:filter 或只是更新 :time:filter 段),但保留应用程序的当前状态。

这样的事情可能吗?

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

【问题讨论】:

    标签: routing ember.js


    【解决方案1】:

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

    实际上,您希望 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')

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

    【讨论】:

    • 谢谢,这正是我要找的 :)
    最近更新 更多