Получение данных от элемента

Ответа на форуме не нашёл.

Как получить данные при клике на элемент? Как их прописывать необходимо?

Сейчас делаю подобную схему:

this.bindTo(this.elem('btn'), 'click', function(e, data) {
    var type = this.getMod($(e.target), 'type'));
    ...
})

Но такое чувство что нужно иначе. type хранить в другом виде

.... сейчас сделал так

this.bindTo(this.elem('btn'), 'click', function(e, data) {
    var type = $(e.target).attr('data-type');
    ...
})

но вот на сколько это TRUE решение?

9 years ago

tavriaforever

Расскажи подробней твою задачу? Кажется, что речь идет о js параметрах

9 years ago

belozer

Можно сказать, что делаю табы.

Есть списки фильтров и кнопки для показа разных списков фильтров. При нажатии на кнопку должен отображаться нужный фильтр(список).

Обработчик кнопок(табов)

/* global modules:false */

modules.define('b-map-fbtns', ['i-bem__dom', 'events__channels', 'jquery'], function(provide, BEMDOM, channels, $) {

BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {

                this.bindTo(this.elem('btn'), 'click', function(e, data) {
                    // снимаем выделение на активных кнопках
                    var activeted = this.elem('btn', 'active', true);
                    this.setMod(activeted, 'active', false);

                    var btn = $(e.target);
                    var type = btn.attr('data-type');

                    this.setMod(btn, 'active', true);

                    channels('map-filter-btns').emit('type', type);
                })
            }
        }
    }
})

provide(BEMDOM);

});

Обработчик списков:

modules.define('b-map-filters', ['i-bem__dom', 'events__channels', 'jquery'], function(provide, BEMDOM, channels, $) {

BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function () {

                // канал кнопок фильтров
                channels('map-filter-btns').on('type', function(e, data) {
                    console.log(data);
                    if(data == 'districts') {
                        this.setMod(this.elem('profgroups'), 'display', false);

                        this.setMod(this.elem('districts'), 'display', true);
                        this.setMod(this.elem('cities'), 'display', true);
                    }
                    if (data == 'profgroups') {
                        this.setMod(this.elem('districts'), 'display', false);
                        this.setMod(this.elem('cities'), 'display', false);

                        this.setMod(this.elem('profgroups'), 'display', true);
                    }
                }, this)
            }
        }
    }
})

provide();

});

9 years ago

qfox

Нельзя намиксовать элемент на фильтр?

...
<div class="tab tab__trigger" data-bem='{"tab":{"id":123}}'>click to show tab 123</div>
<div class="tab tab__trigger" data-bem='{"tab":{"id":456}}'>click to show tab 456</div>
...
<div class="tab tab__body" data-bem='{"tab":{"id":123}}'>content for tab 123</div>
<div class="tab tab__body" data-bem='{"tab":{"id":123}}'>content for tab 456</div>
...

в tab.js:

BEMDOM.decl('tab', {
  onSetMod: {
    js: function () {
      tabs.push(this);
      this.bindTo(this.elem('trigger'), 'click', function () {
        this.__self.tabs.forEach(function (tab) {
          tab.delMod(tab.elem('body'), 'visible');
        });
        this.setMod(this.elem('body'), 'visible', true);
      });
    }
  }
}, {
  tabs: []
});

9 years ago

belozer

@zxqfox учту такой подход, т.к. он значительно короче )

9 years ago

tadatuta

Если исходить из предположения, что порядок табов совпадает с порядком панелей, то можно вообще никаких дополнительных данных не вводить:

_initTabs: function() {
    this._tabs = this.findBlockInside('tabs');

    // переключаемся на нужный таб при заходе на урл с якорем
    var currentTab = window.location.hash.substr(1);
    if (currentTab && currentTab !== 1) this.switchTab(currentTab - 1);

    this.bindTo('tab-ancor', 'click', function(e) {
        this.switchTab(this.elem('tab-ancor').index(e.target));
    });
},
switchTab: function(currentTabIndex) {
    // TODO: проверять, не является ли currentTabIndex уже активным
    var groups = this.elem('group'),
        tabAncors = this.elem('tab-ancor');

    var tabsAncors = this._tabs.elem('tab-ancor');

    this._tabs
        .delMod(tabsAncors, 'state')
        .setMod(tabsAncors.eq(currentTabIndex), 'state', 'current');

    return this
        .delMod(tabAncors, 'state')
        .setMod(tabAncors.eq(currentTabIndex), 'state', 'current')
        .setMod(groups, 'hidden', true)
        .delMod(groups.eq(currentTabIndex), 'hidden');
}

Альтернативный пример реализации можно посмотреть в https://github.com/sipayRT/hackaton/blob/hackaton/common.blocks/tabs/

Чтобы оставлять комментарии, необходимо авторизоваться.