如何从成员控制器或组件观察把手模板中的多个状态

我是ember的新手，正在处理典型的"如何做到这一点"问题。我的方法很简单，我知道怎么做，但我的方法太复杂了，我认为这是不对的。

案例：

<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将active类添加到锚标记中，我创建了一个组件来观察：

类似：

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['active'],
  active: function() {
      return this.get('childViews').anyBy('active');
  }.property('childViews.@each.active') 
});

用｛｛链表｝｝替换li元素确实有效。

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

我认为必须有一个更简单的方法。我已经为这样一个简单的行为创建了很多文件，我认为我完全走错了方向。

我的直觉是：这就是视图逻辑，视图应该只观察模板中的几个状态，就这样

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