如何从余烬控制器或组件观察车把模板中的多个状态

Question

我是新手，正在为典型的“人该怎么做”而苦苦挣扎。 我所拥有的非常简单，我知道该怎么做，但是我的方法是如此复杂，以至于我认为这是不正确的。

案子：

<ul>
  <li>{{link-to top-level}}</li>
  <li>{{link-to another-top-level</li>
  <ul class="submenu">
     <li>{{link-to submenu</li>
  </ul>
</ul>

应该发生的是：

• 单击路由后，相应的列表元素应变为活动状态。
• 单击子菜单时，相应的上级ul元素应打开该类

这是使用jQuery的相当简单的情况，但是我知道这不是可伸缩的，抽象的东西。

因此，我从这种方法开始：

• 为整个导航创建一个控制器/模板构造，以处理其状态（我还需要检查其他一些事情，因此派上了用场）。

• 由于ember将活动类添加到了定位标记，所以我创建了一个组件来观察：

喜欢：

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
      return this.get('childViews').anyBy('active');
  }.property('childViews.@each.active') 
});

确实可以用{{linked-list}}替换li元素。

但是接下来呢？ 我是否需要添加另一个组件来监视该组件以监视活动链接的内置行为？ 我是否必须为所有DOM元素编写专用的MVC类？

我认为必须有一种更简单的方法。 我已经为这种简单的行为创建了一个完整的lotta文件，以至于我认为自己完全走错了路。

我的直觉是：这就是视图逻辑，视图应该只观察模板中的一些状态，仅此而已。

解决问题的最精简方法是什么？

Answer 1

我不知道我是否正确理解您的问题，但是为什么要向相应的上层元素添加open类？ 它会自动被激活分配。 并且使用正确的CSS，它应该可以按预期工作。

我创建了一个小例子来说明我的意思。 请看一下，让我知道，如果这是适合您的解决方案，或者您对此解决方案有何疑问？

http://emberjs.jsbin.com/wifusosadega/7/edit

编辑

这是Bootstrap风格的版本： http : //emberjs.jsbin.com/wifusosadega/9/edit 。