1

我有一个使用 Ember 数据存储从服务器中提取的帖子列表，然后我将其呈现在侧边栏列表中，例如视图，每个帖子使用 {{action}} 帮助器生成一个 href，该帮助器通过查找相应的路由器状态来生成一个有效的 href . 单击帖子将其加载到内容出口中。这一切都完美无缺。

我想在一个项目被选中时添加一个类——例如“is-active”——无论是在单击它时，还是当路由器状态转换到与 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/

4

1 回答 1

0

如果您提供带有示例代码的 jsfiddle，您可能会得到更准确和更完整的问题答案。

话虽如此，一种方法可能是创建一个“isSelected” Post 属性，该属性绑定到 selectedPostController（或 selectedPost 计算属性）。在单击或从 url 初始化路由器/状态时，您可以将 selectedPostController 的值设置为所选项目，触发绑定以将当前帖子的 isSelected 更新为 true ，将所有其他帖子更新为 false 。

然后，按照http://emberjs.com/documentation/#toc_binding-class-names-with-bindattr上的 ember 文档，

“类属性可以像任何其他属性一样被绑定，但它也有一些额外的特殊行为。默认行为就像你期望的那样工作。

但是，如果您绑定的值是布尔值，则该属性的 dasherized 版本将作为一个类应用（如果布尔值为 true）：

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

这会发出以下 HTML（如果为 true，它将被添加，如果为 false，则不会添加任何类）：

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

然后将选中的 CSS 类设置为您想要的样式。

于 2012-06-19T06:18:45.483 回答