@belozyorcev Не-не-не-не-не, Девид Блейн! Нельзя так делать!

this должен указывать на экземпляр каждого блока, а тут получается, что он всегда будет указывать на того, кто последний инициализировался.

Чтобы было понятно о чем речь, добавь в своем примере подписку на клик и положи несколько scroller на страницу:

this.bindTo('click', function() {
    console.log(block.domElem); // при клике на любой будет выводить ссылку на последний
});

Каждый с ней сталкивался, когда приходилось что-то делать с фильтрами

JFYI, методы типа filter(), map() или forEach() последним необязательным параметром принимают контекст, как и многие из методов i-bem.js.

@tadutata

а разве функция не задаёт "замыкание" переменной?

function(provide, BEMDOM, $) {}

В том-то и дело ;)

Тут важно понимать, что модуль в памяти создается один раз, а onSetMod js inited дергается столько раз, сколько блоков окажется на странице. И в замыкании останется ссылка на тот экземпляр блока, который заинитится последним.

Эххх ) Жаль... Решение было так близко )

@tadutata Есть ещё один вариант, вдохновлённый bem-core@v3

Что скажешь?

modules.define('scroller', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {

BEMDOM.decl(this.name, {
    onSetMod: {
        'js' : {
            'inited' : function() {
                this.el('body').setMod('size', 'xxx');
            }
        }
    },

    el: function (name) {
        var elem = this.elem(name);
        var self = this;
        elem.setMod = function (mod, val) {
            self.setMod(this, mod, val)
        };
        return elem;
    },

}, {});

provide(BEMDOM);

});

Такую вещь проще доопределить в блоке i-bem__dom на уровне проекта, чтоб не копипастить в каждый блок

@Guria, как раз начал задумываться над этим :) А за намёк спасибо )

Ребята, что вы делаете? Если уж сильно хочется писать this.elem().setMod - расширьте jQuery.fn один раз и пишите.

Я пока пользуюсь тем что дают и не парюсь :)

Короткая запись модификации элементов

было:

this.setMod(this.elem('body'), 'size', 'xxx'); 
this.setMod(this.elem('body'), 'color', 'gray');

стало:

this.el('body')
      .setMod('size', 'xxx')
      .setMod('color', 'gray');

Реализация

1. в каталоге common.blocks создаём каталог i-bem в котором создаём каталог __dom
2. в каталоге __dom создаём файл i-bem__dom.browser.js со следующим содержимым

modules.define('i-bem__dom', function(provide, BEMDOM) {

provide(BEMDOM.decl({

    el: function (name) {
        var elem = this.elem(name),
            self = this;

        elem.setMod = function (mod, val) {
            self.setMod(this, mod, val);
            return this;
        };

        return elem;
    }

}));

});

П.Н. спасибо @Guria за подсказку

@apsavin А как узнать при этом к какому блоку элемент относится?

@belozyorcev вроде норм, только тогда надо другими методами приправить

@Guria @belozyorcev Мне нравится идея дорулить .setMod и другие функции в $.fn, но я не очень понимаю, как это можно сделать без знаний о блоках, к которым этот элемент относится.

Но если делать через this.el — может быть проще один раз в $.fn дописать .setMod и другие функции, а в .el засовывать сам блок в возвращаемый jQuery-chain? Ну и при использовании без блока просто ругаться.

upd Кажется, при использовании $('.some-class__some-elem') (равно как и this.elem('some-elem')) мы будем иметь в jQuery-chain свойство selector (еяпп) с нужными нам данными, которые надо будет просто распарсить.

Кажись понял. Не нравится то, что в предложенном решении к каждому элементу навешивается свой отдельный метод? Причём при каждом вызове .el. Действительно, наверное не очень хорошо.

@Guria В том числе, но еще и this.el можно было бы заменить на this.elem.

@tadatuta А как рулятся такие ситуации?

<div class="block">
  <span class="block__elem"></span>
  <div class="block">
    <span class="block__elem"></span> <!-- этот -->
  </div>
</div>

Элемент внутренний будет в обоих блоках виден?

@zxqfox - боюсь что через $.fn решение окажется более громоздким. Вдобавок ко всему нужно следить за кэшем БЭМ.

@belozyorcev Но и более универсальным ;-) И не будет путаницы между .el и .elem

@zxqfox - желание было сделать через .elem, дабы реализовать "подготовительный" этап перед bem-core@v3 Но пока это .el.

Может как-то так?

var origElem = this.elem;
this.elem = function (...) {
  var ret = origElem(...);
  ret.setMod = ...;
  return ret;
};

А как рулятся такие ситуации?

@zxqfox я думаю, что в таком случае тебе может помочь this.findElem('elem', true);. Со strictMode i-bem не будет искать элемент глубже.

В bem-core@v2 есть экспериментальная фича, реализующая работу с инстансами элементов. Для ее использования достаточно добавить в зависимости блока следующее:

mustDeps: { block: 'i-bem', elem: 'dom', mods: { 'elem-instances': true } }

Тогда можно устанавливать модификатор напрямую у инстанса элемента:

this.elemInstance('body')
      .setMod('size', 'xxx')
      .setMod('color', 'gray');

Кроме того, можно работать с БЭМ-событиями на элементах, создавать для них декларации и т.д.

@aristov ооо :) Правда запись немного длинная получается

@belozyorcev да, но для нас читаемость и понятность кода важнее краткости его написания.