Question

我试图通过简单的行为来学习Ember，而且我正在使用侧边栏实施方式。

这是一个带图标的可扩展/可折叠侧边栏。单击图标时，会突出显示该图标，并在展开的侧边栏窗格中显示相应的内容。再次单击同一图标时，侧边栏会折叠，应用程序将返回相应的索引路径。

我非常接近这种定义的行为，但我总是想念一件小事。

<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钩子但没有成功。

<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函数中进行所有过程并重定向到正确的路由，或者如果我检测到它与当前路径相同，则为索引。侧边栏展开和折叠，内容窗格随路径相应更新。但是，我没有找到如何绑定所选<li>上的活动类并删除所有兄弟姐妹的活动类。

有什么想法吗？

Answer 1

很难理解你的{{#each}}发生了什么。这是每个型号，控制器，还有别的什么？

无论如何，不管这是什么（比如Tab模型），你只想知道Tab isSelected是否合适。然后，您可以在迭代isSelected时将类绑定到each。

如果控制器正在处理selectTab，它应该能够执行以下操作：

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

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

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

1 个答案: