如何從余燼控制器或組件觀察車把模板中的多個狀態

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 。