jquery - 使用与 Ember 相同的按钮展开/折叠侧边栏

Question

我正在尝试实现简单的行为来学习 Ember，但我在侧边栏实现方面遇到了瓶颈。

这是一个带有图标的可展开/可折叠侧边栏。单击图标时，它会高亮显示，并在展开的侧边栏 Pane 中显示相应的内容。再次单击同一图标时，侧边栏会折叠，应用程序会返回到相应的索引路由。

我非常接近这个定义的行为，但我总是错过一些小东西。

<div id="sidebar" {{bind-attr class='selectedTab::collapsed'}}>
<div id="sidebar-items">
    {{#each}}
        {{#link-to target tagName="li"}}
            <a {{bind-attr href=view.href}}>{{fa-icon icon}}</a>
        {{/link-to}}
    {{/each}}
</div>
<div id="sidebar-pane">
    {{outlet}}
</div>
</div>

在此实现中，我无法折叠侧边栏，因为如果我再次单击同一个图标，Ember 不会再次尝试路由，因此我无法访问我正在根据当前路由测试请求路由的代码，如果相等，我会在那里过渡到索引路由。我尝试使用 willTransition Hook 但没有成功。

<div id="sidebar" {{bind-attr class='selectedTab::collapsed'}}>
<div id="sidebar-items">
    {{#each}}
        <li>
            <a {{action 'selectTab' target}}>
                {{fa-icon icon}}
            </a>
        </li>
    {{/each}}
</div>
<div id="sidebar-pane">
    {{outlet}}
</div>
</div>

这是我离我需要的越近。在这一个中，我可以在 selectTab 函数中进行所有处理并重定向到正确的路由，或者如果我检测到这是与当前路由相同的路由则进行索引。侧边栏展开和折叠，内容 Pane 随路线相应更新。但是，我没有找到如何在选定的 <li> 上绑定(bind)事件类并删除所有 sibling 的事件类(class)。

有什么想法吗？

Answer 1

很难理解您的 {{#each}} 发生了什么.是每个模型、 Controller 还是其他东西？

无论如何，无论这是什么(比如说 Tab 模型)，您只想知道是否 Tab isSelected或不。然后，您可以将该类绑定(bind)到 isSelected当你遍历 each 时.

如果 Controller 正在处理 selectTab ，它应该能够做这样的事情:

selectTab: function(tab) {
  this.get('tabs').setEach('isSelected', false);
  tab.set('isSelected', true);
}

然后你可以做 <li {{bind-attr class='isSelected:active'}}> .