Добавляем класс active к родителям ссылок

21.04.2015

В фреймворках для верстки foundation zurb и bootstrap активность пункта меню определяется по классу active у нега li, тогда как у Ember.js активность ссылки закреплена у самой ссылки.

Решаем эту проблему так:

//app\initializers\link-view-reopen.js
import Ember from 'ember';

export default {
    name: 'link-view-reopen',
    initialize: function () {
        Ember.LinkView.reopen({
            activeParent: false,
            isActive: false,

            addIsActiveObserver: function () {
                if (this.get('activeParent')) {
                    this.addObserver('isActive', this, 'activeObserver');
                    this.activeObserver();
                }
            }.on('didInsertElement'),

            activeObserver: function () {
                if (this.get('isActive')) {
                    this.$().parent().addClass('active');
                } else {
                    this.$().parent().removeClass('active');
                }
            },

            active: Ember.computed('resolvedParams', 'routeArgs', function () {
                var isActive = this._super();

                Ember.set(this, 'isActive', !!isActive);

                return isActive;
            })
        });
    }
};

Дальше просто добавляем параметр activeParent к каждому компоненту link-to родитель которого так же должен менять свое активное состояние.

//app/templates/application.hbs
  • {{#link-to 'index' activeParent=true}}Главная{{/link-to}}
  • {{#link-to 'news' activeParent=true}}Новости{{/link-to}}
  • {{#link-to 'users' activeParent=true}}Пользователи{{/link-to}}