Всем привет. Помогите найти ошибку. Есть блок (упрощенный вариант)

         {
                    block : 'country',
                    content : [
                     {
                     elem: 'item',
                     placemarkId: 'asia',
                     content: '► Азия'
                     },
                     {
                       elem: 'item',
                       placemarkId: 'africa',
                       content : '► Африка'
                      }

                   ]
            }

к нему i-bem.js файл

     modules.define('country', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {
      provide(BEMDOM.decl(
      this.name,
      {
      onElemSetMod: {
        // Будем реагировать на изменение состояния элемента item
        'item': {
            // когда у него будет меняться модификатор state,
            'state': function (elem, modName, modVal) {
                // Когда мы получили состояние объекта, нам нужно оповестить другие блоки о том, что
                // произошло. Для этого мы вызываем trigger и говорим, что произошло событие menuItemClick,
                // заодно передаём важные параметры: элемент и его идентификатор метки.
                this.emit('click', {
                    domElem : elem,
                    group: this.elemParams(elem).group
                });
            }
        }
    },

    onTriggerElemClick: function (e) {
        e.preventDefault();
        var el = e.currentTarget;
        // Потом точечно включим у того, по которому нажали.
        this.toggleMod(el, 'state', 'active');
        }
        }, {
        live: function () {
        // Вешаем слушатель на клик.
        this.liveBindTo('item', 'click', function (e) {
            this.onTriggerElemClick(e);
        });

        this.on('click', function (e, data) {
            var activeState = this.buildSelector('item', 'state', 'active').substr(1);
            this.lastSelected && this.lastSelected.removeClass(activeState);
            this.lastSelected = data.domElem;
            });
        }
    }
        ));
    });

Работать не хочет. Где ошибка?

Пока из очевидного могу только порекомендовать вместо buildSelector вызывать buildClass — тогда не придется делать substr(1). Но мне в целом не очень нравится вариант сбрасывания модификатора с помощью removeClass, для этого есть delMod у экземпляров блоков.

А про остальное нужно больше подробностей, чтобы ответить. В целом триггер события через this.emit('menuItemClick', data) правильный. Чтобы подписаться на события такого типа от конкретного блока, необходимо иметь ссылку на инстанс блока либо его DOM-узел, тогда подписка будет выглядеть так:

blockInstance.on('menuItemClick', callback); // blockInstance можно получить, например, через вызов findBlockInside у родителя

либо

Menu.on(menuDomElem, 'menuItemClick', callback); // в данном случае Menu указывает на класс (получаем от модульной системы), а menuDomElem фильтруем события menuItemClick только данным рамками этого DOM-узла

@tadatuta Как правильно заменить

 var activeState = this.buildClass('item', 'state', 'active');
 this.lastSelected && this.lastSelected.removeClass(activeState);

и сделать с delMod? Т.е. нам нужно удалить класс item_state_active у предыдущего элемента.

this.lastSelected.delMod

и

this.delMod(this.lastSelected, 'state_active');

не работают

Block.prototype.delMod({?String|jQueryChain} elem, {String} mod)

Второй вариант почти правильный, только не state_active, а state.

this.delMod(this.lastSelected, 'state'); — видимо, так.

P.S. пока что delMod работает через setMod с пустой строкой, и хотя завязываться на это не стоит, но помогает запомнить параметры: https://github.com/bem/bem-core/blob/v2/common.blocks/i-bem/i-bem.vanilla.js#L485-L499

Сделал. Модификатор не удаляет

 modules.define('menu', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {
  provide(BEMDOM.decl(
  this.name,
{
onElemSetMod: {
    // Будем реагировать на изменение состояния элемента item
    'item': {
        // когда у него будет меняться модификатор state,
        'state': function (elem, modName, modVal) {
            // Когда мы получили состояние объекта, нам нужно оповестить другие блоки о том, что
            // произошло. Для этого мы вызываем trigger и говорим, что произошло событие menuItemClick,
            // заодно передаём важные параметры: элемент и его идентификатор метки.
            this.emit('menuItemClick', {
                domElem : elem,
                group: this.elemParams(elem).group
            });
        }
        }
   },
onTriggerElemClick: function (e) {
    e.preventDefault();
    var el = e.currentTarget;
    // Потом точечно включим у того, по которому нажали.
    this.toggleMod(el, 'state', 'active');
    }
}, {
live: function () {
    // Вешаем слушатель на клик.
    this.liveBindTo('item', 'click', function (e) {
        this.onTriggerElemClick(e);
    });

    this.on('menuItemClick', function (e, data) {
        // Почему-то не срабатывает delMod.
       // var activeState = this.buildClass('item', 'state', 'active');
        this.delMod(this.lastSelected, 'state');
       // this.lastSelected && this.lastSelected.removeClass(activeState);
        this.lastSelected = data.domElem;
        });
    }
   }
   ));
});

this.on('menuItemClick', function (e, data) { — я вот в этой строчке вообще не уверен, почему on делается в live? контекст точно доезжает? выглядит нестабильно.

Сейчас попробую заменить на

  this.liveInitOnEvent

Отпишусь, но вроде все доезжало (когда с remove было)

Меня смущает, что this.lastSelected это объект, и как у него удалить модификатор?

Вообще задача такая, есть блок со списком, что-то вроде меню. По клику на определенный item нужно изменить его цвет. Когда кликаем по другому пункту, у предыдущего снять выделение, а новому поставить. Вариант с remove работает, с delMod нет. Причем в коде явно какие-то ошибки, потому что при подключении файла js данного блока у меня перестают работать все другие менюшки ( стандартные из bem-components) на странице. Я сперва думал что дело в названии блока и поменял его с menu на произвольное country, чтобы избежать повторений. Не помогло.

В js все объект. Даже объект. Но у объекта есть разные методы, которые меняют DOM дерево. Вообще, у тебя lastSelected это дом нода блока, лучше сохраняй ссылку на сам блок и делай this.lastSelected.delMod('item', ...

Если задача ограничивается таким условием

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

то все просто:

modules.define('some-menu', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onItemClick: function(e) {
        this
            .delMod(this.elem('item'), 'active')
            .setMod(e.currentTarget, 'active');
    }
}, {
    live: function() {
        this.liveBindTo('item', 'click', this.prototype.onItemClick);
    }
}));

});