EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

Коллекции блоков и элементов

Общее описание Способы получения API

Для удобства работы одновременно с несколькими экземплярами блоков или элементов существует специальный класс коллекции, реализованный в элементах collection блоков i-bem и i-bem-dom.

Способы получения коллекции

Создание экземпляра класса коллекции

Экземпляр класса коллекции создается базовыми средствами JavaScript, с помощью класса BemCollection модуля i-bem__collection или BemDomCollection модуля i-bem-dom__collection. Конструктор обоих классов принимает один аргумент в виде массива, либо несколько аргументов:

Пример

modules.define(
    'my-form',
    ['i-bem-dom', 'i-bem-dom__collection', 'button', 'input'],
    function(provide, bemDom, BemDomCollection, Button, Input) {

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                var button = this.findChildBlock(Button),
                    input = this.findChildBlock(Input);

                this._controls = new BemDomCollection(button, input);
            }
        }
    }
}));

});

Методы поиска

Методы поиска, способные найти несколько экземпляров блоков или элементов, возвращают коллекцию, состоящую из найденных экземпляров.

Пример

modules.define('my-form', ['i-bem-dom', 'input'], function(provide, bemDom, Input) {

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._inputs = this.findChildBlocks(Input);
            }
        }
    }
}));

});

Методы коллекции

Пример

modules.define('my-form', ['i-bem-dom', 'input'], function(provide, bemDom, Input) {

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._inputs = this.findChildBlocks(Input);
            }
        },

        'disabled' : function(modName, modVal) {
            this._inputs.setMod(modName, modVal);
        }
    },

    getValue : function() {
        return this._inputs
            .filter(function(input) {
                return !input.hasMod('disabled');
            })
            .map(function(input) {
                return input.getValue();
            });
    }
}));

});