Как реализовать замену текста кнопки?

Форум /

Есть блок, в котором есть кнопка и блок с картой от Яндекса. При нажатии на кнопку раскрывается карта. Реализовано через toggleMod. Заменяю текст кнопки через

var button=...
...
button.findElem('text').text("Скрыть")

Как сделать, чтобы при закрытии карты текст в ней снова стал "показать"?

8 years ago

tadatuta

У button есть специальный метод для изменения текста: https://ru.bem.info/libs/bem-components/v2.4.0/desktop/button/jsdoc/#jsdoc-setText-1
Если карта раскрывается с помощью toggleMod, то в блоке-родителе, который включает карту и кнопку, можно подписаться на событие изменения модификатора на карте и в коллбеке менять текст кнопки. Что-то типа:

modules.define('parent', ['i-bem__dom', 'button', 'map'],
    function(provide, BEMDOM, Button, Map) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var map = this.findBlockInside('map'),
                    button = this.findBlockInside('button');

                Button.on(this.domElem, 'click', function() {
                    map.toggleMod('visible');
                });

                Map.on(this.domElem, { modName: 'visible', modVal: '*' }, function(e, data) {
                    button.setText(data.modVal ? 'Показать' : 'Скрыть');
                });
            }
        }
    }
}));

});

8 years ago

cyberS7

Огромное спасибо! Но я так понял, что с блоком 'map'нужно произвести какие-то манипуляции, иначе выдает ошибку в консоль

Error: Module "footer": can't resolve dependence "map"

Пока реализовал через

modules.define('footer', ['i-bem__dom', 'button'],
function(provide, BEMDOM, Button) {
  provide(BEMDOM.decl(this.name, {
    onSetMod: {
      js: {
        inited: function() {
            var map = this.findBlockInside('map'),
            button = this.findBlockInside('button');

            Button.on(this.domElem, 'click', function() {
              map.toggleMod('visible');
              map.toggleMod('hidden');
            });

            BEMDOM.blocks.map.on(this.domElem, { modName: 'visible', modVal: '*' }, function(e, data) {
              button.setText(data.modVal ? 'Скрыть' : 'На карте');
            });
          }
      }
  }));
});

8 years ago

tadatuta

я так понял, что с блоком map нужно произвести какие-то манипуляции

Предполагалось, что у map есть JS-реализация и она попадает в сборку (указана в deps.js). Больше ничего не должно быть нужно.

map.toggleMod('visible');
map.toggleMod('hidden');

А точно нужны два модификатора? По-идее они же про одно и то же и должно быть достаточно что-то типа:

.map {
    display: none;
}

.map_visible {
    display: block;
}

8 years ago

cyberS7

Про модификаторы в курсе) это просто набросок)

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