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

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

Я хочу добавить класс к элементу, когда он выбран — например, «активен» — либо при нажатии на него, либо при переходе состояния маршрутизатора в состояние, соответствующее href, например: когда пользователь нажимает кнопку назад или переходит непосредственно к /posts/24, выбирается сообщение с идентификатором 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/


url-routing ember.js ember-old-router
person Ivan    schedule 19.06.2012    source источник
comment
Я не знаю, видели ли вы это или даже актуально ли это, но в вашем списке сообщений ссылки имеют неверный URL-адрес (href='/posts/posts/undefined'). Все они имеют undefined в качестве идентификатора, на данный момент он работает благодаря помощнику действий.   -  person MilkyWayJoe    schedule 08.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

Если вы предоставите jsfiddle пример кода, вы, вероятно, получите гораздо более точный и полный ответ на свой вопрос.

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

Затем следуйте документам ember по адресу http://emberjs.com/documentation/#toc_binding-class-names-with-bindattr,

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

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

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

Это выдает следующий HTML (если true, он будет добавлен, если false, класс не будет добавлен):

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

Затем стилизуйте выбранный класс CSS, чтобы он выглядел так, как вы хотите.

person Jack Johnson    schedule 19.06.2012
comment
Спасибо за ваш ответ, Джек, вот jsfiddle для справки: jsfiddle.net/Pts7Q/31 - person Ivan; 19.06.2012
comment
Я рассмотрел что-то вроде вашего решения, которое отлично подойдет для выбора сообщений, но не для выбора страницы, есть идеи? - person Ivan; 19.06.2012
comment
Прохладный! Я попробую позже сегодня вечером, когда вернусь домой, если никто не решит это к тому времени. - person Jack Johnson; 20.06.2012
comment
Вам повезло с этим? - person Ivan; 22.06.2012