单击或路由更改后的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类设置为所需样式。