Ember.js 余烬-保存子菜单状态

我有一个子菜单，只有在选择主菜单中的菜单项时才会出现。我想做的是保存子菜单的状态，这样，当用户在子菜单中选择某个内容，然后在主菜单中导航时，当用户返回子菜单时，该子菜单项仍应处于选中状态。但是，我不知道该怎么做。有什么想法吗

{{{链接到'a'}a{{/链接到}
{{{链接到'b'}b{{/链接到}
{{{#链接到'c'}c{{/link到}

{{outlet}}

{{{链接到'f'}f{{/链接到}
{{{{链接到'g'}}g{{/链接到}
{{{链接到'h'}}h{{/链接到}

{{outlet}}
B
C
F
G
H
App.Router.map（函数（）{
this.resource（'a'，function（）{
这是一种资源（“f”）；
这是一种资源（“g”）；
这是一种资源（“h”）；
});
这是一种资源（“b”）；
这个.resource（'c'）；}）；

从

A

路线过渡时，您可以检查

过渡

对象并查看您要去哪里。可以隐藏您要去的位置（如果它是

a

的子路由），然后在

AIndexRoute

的

重定向

钩子中再次使用它

---

看看这把更新过的小提琴：

算出了。我认为

ember latest.js

指向的是最新的产品版本，它实际上指向了beta-canary的beta版。transition对象在prod或beta版中不包含handlerInfos对象，仅在canary中包含。

在JSFIDLE中看起来不错。但是，由于某些原因，完全相同的代码在本地不起作用。作为参数传递给路由的“willTransition”操作的“transition”对象没有handlerInfos属性。所以我得到了一个“不能调用未定义的'any'方法”？我已经仔细检查了我的库版本。我使用的是jquery 2.0.3、Handlebar 1.0.0和ember 1.0.0-4-g111e097（目前是最新版本）。有什么想法吗？我还发现，

transition.router.currentHandlerInfos

在我从

/a/g

导航到

/b

后调用

willTransition

时仍然包含（例如，

[application，a，g]

的处理程序。因此，我无法使用该属性来决定是否应该设置

savedPath

，我已经了解了更多信息。在更真实的情况下，我需要从transition对象获取链接传递给helper的模型。它可以在transition.providedModels（doh！）中找到。工作是一种享受。

    <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#/a/f">Main Menu</a>
        <ul class="nav">
            <li>{{#link-to 'a'}}A{{/link-to}}</li>
            <li>{{#link-to 'b'}}B{{/link-to}}</li>
            <li>{{#link-to 'c'}}C{{/link-to}}</li>
        </ul>           
      </div>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="a">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#/a/f">Sub Menu A</a>
        <ul class="nav">
            <li>{{#link-to 'f'}}F{{/link-to}}</li>
            <li>{{#link-to 'g'}}G{{/link-to}}</li>
            <li>{{#link-to 'h'}}H{{/link-to}}</li>
        </ul>           
      </div>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="b">
B
</script>

<script type="text/x-handlebars" id="c">
C
</script>

<script type="text/x-handlebars" id="f">
F
</script>

<script type="text/x-handlebars" id="g">
G
</script>

<script type="text/x-handlebars" id="h">
H
</script>

App.Router.map(function () {
this.resource('a', function() {
    this.resource('f');
    this.resource('g');
    this.resource('h');
});
this.resource('b');
this.resource('c');});