單擊或路由更改后的Ember Router活動項

Question

我有一個使用Ember Datastore從服務器中拉出的帖子列表，然后將其呈現在類似視圖的側邊欄列表中，每個帖子都使用{{action}}幫助程序生成了href，該幫助程序通過查找相應的路由器狀態來生成有效的href 。 單擊帖子可將其加載到內容輸出中。 所有這一切都完美。

我想在選擇某個項目時（例如，“處於活動狀態”）將一個類別添加到一個項目中，或者在單擊該項目時，或者當路由器狀態轉換為與href匹配的狀態時，例如：當用戶按下后退按鈕或直接導航到/ posts / 24，將選擇ID為24的帖子。

理想情況下，我希望將其解決方案與實際的Post記錄分開，因為它純粹是一種演示，我也想使用此方法以相同的原理突出顯示菜單項。

普遍接受的方法是什么？

編輯：

App.Router: Ember.Router.extend(
  root: Ember.Route.extend(
    goToPostsIndex: Ember.State.transitionTo('posts.index')
    goToAbout: Ember.State.transitionTo('about')
    goToShowPost: Ember.State.transitionTo('posts.show')

    index: Ember.Route.extend(
      route: '/'
      redirectsTo: "posts.index"
    )

    posts: Ember.Route.extend(
      route: '/posts'

      index: Ember.Route.extend(
        route: '/'
        connectOutlets: ((router) ->
          router.get('applicationController').connectOutlet('posts', App.posts)
        )
      )

      show: Ember.Route.extend(
        route: '/posts/:post_id'

        connectOutlets: (router, post) ->
          router.get('postsController').connectOutlet('post', post)
     )
   )

     about: Ember.Route.extend(
       route: '/about'
       connectOutlets: (router) ->
         router.get('applicationController').connectOutlet('about')
     )

    )
  ) 
)

這是我當前設置的小提琴： http : //jsfiddle.net/Pts7Q/31/

Answer 1

如果為jsfiddle提供示例代碼，則可能會為您的問題提供更加精確和完整的答案。

話雖如此，一種方法可能是創建綁定到selectedPostController（或selectedPost計算屬性）的“ isSelected” Post屬性。 在單擊或從URL初始化路由器或路由器/狀態時，可以將selectedPostController的值設置為選定的項目，從而觸發綁定以將update更新為當前選定的isSelected為true，將其他所有綁定為false。

然后，按照http://emberjs.com/documentation/#toc_binding-class-names-with-bindattr上的ember文檔進行操作，

“ class屬性可以像其他任何屬性一樣綁定，但是它還具有一些其他特殊行為。默認行為的工作方式與您期望的一樣。

但是，如果綁定到的值是布爾值，則該屬性的反划線版本將用作類（如果布爾值為true）：

 <div {{bindAttr class="isSelected"}}>
   Post title here
 </div>

這將發出以下HTML（如果為true，則將其添加，如果為false，則將不添加任何類）：

 <div class="is-selected">
   Post title here
 </div>

然后，將is-selected CSS類設置為所需樣式。