Активный элемент Ember Router при изменении кликов или маршрутов

Question

У меня есть список сообщений, вытаскиваемых с сервера с использованием Ember Datastore, которые я затем отображаю в списке боковой панели, например view, каждое сообщение генерирует href с помощью помощника {{action}} который генерирует действительный href, просматривая соответствующее состояние маршрутизатора. Нажатие на сообщение загружает его в контентную розетку. Все это прекрасно работает.

Я хочу добавить класс к элементу, когда он выбран - например, «активен» - либо при нажатии на него, либо когда состояние маршрутизатора переходит в состояние, соответствующее href, например: когда пользователь нажимает кнопку «Назад» или переходит непосредственно к/posts/24, появляется сообщение с идентификатором 24.

В идеале я хотел бы, чтобы решение этого было отделено от фактической записи Post, поскольку это чисто презентационная вещь, и я также хочу использовать этот подход для выделения пунктов меню с использованием того же принципа.

Каков общепринятый способ сделать это?

Edit:

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 с примерами кода вы, вероятно, получите гораздо более точный и полный ответ на ваш вопрос.

С учетом этого одним из подходов может быть создание атрибута «isSelected» Post, который привязан к выбранномуPostController (или вычисленному вычисленному объекту). При инициализации щелчка или маршрутизатора/состояния из url вы можете установить значение selectedPostController для выбранного элемента, инициируя привязки для обновления isSelected для true для текущей записи и false для всех остальных.

Затем, следуя Тлеющей документы на http://emberjs.com/documentation/#toc_binding-class-names-with-bindattr,

«Атрибут класса может быть связан, как и любой другой атрибут, но он также имеет некоторые дополнительные особое поведение. Поведение по умолчанию работает, как вы ожидали бы.

Если значение, которое вы связываете булева, однако, dasherized версия этого свойства будет применяться как класс (если логическое значение верно):

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

Срабатывает следующий HTML (если это правда это будет добавил, если будет добавлено ложное ни один класс):

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

Затем стиль IS-выбранный класс CSS, чтобы посмотреть, как вы.