Войти с помощью github

Всем привет. К примеру есть такой вот bemjson

{
    block: 'b1',
    content: [
        {
            block: 'b2',
            mix: {block: 'b1', elem: 'e1'},
            content: [
                {
                    elem: 'e1',
                    content: 'title'
                },
                {
                    elem: 'e2',
                    content: 'description'
                }
            ]
        },
        {
            block: 'b2',
            mix: {block: 'b1', elem: 'e1'},
            content: [
                {
                    elem: 'e1',
                    content: 'title'
                },
                {
                    elem: 'e2',
                    content: 'description'
                }
            ]
        }
    ]
}
Допустим блок b1 это какой-то список, b2 это элемент списка который может использоваться еще где-то на странице но не в виде элемента списка а просто в виде блока. Но вот дилемма, если примиксовать к b2 элемент блока b1e1 и задать ему bemhtml в котором бы говорилось что b1e1 должен иметь тег li то этот код не срабатывает. Напрямую в bemjson писать не хочется tag. Пробовал прописывать всякого рода зависимости, блока b2 от блока b1, блока b2 от элемента e1 блока b1 и блока b1 от элемента e1. Как будет правильно поступать в данной ситуации?

Всем привет. Начал я знакомится с БЭМ, очень он мне понравился. Решил попробовать его вживую. Склонировал себе project-stub, установил зависимости. Все работает, все круто, все попробовал, кароче все супер. Но тут я дошел до i-bem js, думаю дай попробую написать что-то простенькое на нем. Взял блок:

{
    block: 'header',
    js: true,
    content: [
        'header content goes here'
    ]
}
В папке common.blocks создал как полагается папку header, положил туда header.js И написал туда самое простое что смог придумать:
console.log(1);
modules.define('header', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            'js': {
                'inited': function () {
                    console.log('hello');
                    this.bindTo('click', function(e) {
                        console.log("Clicked!")
                    });
                }
            }
        }
    }));
});

Единица выводится, а вот hello и уж темболее clicked нет. В чем может быть проблема? Не знаю в какую сторону копать, может какая-то зависимость не установилась или в синтаксисе не разобрался. Не пойму...

Не могу разобраться, как использовать нотацию borschik:include: в js-файлах.

Есть пример. Файл a.js:

/* borschik:include:b.js */

Файл b.js:

// test b

Если исопльзую просто borschik с командной строки, то всё работает:

borschik --input=a.js --minimize=no

-- всё работает ок. В составе enb сборки инструкция не обрабатывается.

Пытался подключать js-borschik-include в .enb/make.js для обработки отдельных исходных файлов, но либо не разобрался с особенностями конфигурации (обычная история), либо какие-то ещё дрова попались.

Включаю технологию:

var
    // ...
    techs = {
        // ...
        borschikInclude: require('enb-borschik/techs/js-borschik-include'),
        browserJs: require('enb-js/techs/browser-js'),
        // ...
    },
    // ...
;
module.exports = function (config) {
    // ...
    config.nodes('pages/*', function(node) {
        node.addTechs([
            // ...
            [techs.borschikInclude, {
                sourceSuffixes : ['js'],
                target: '?.pre.js',
            }],
            [techs.browserJs, {
                sourceSuffixes: ['vanilla.js', 'js', 'browser.js'],
                sourcemap: true,
                includeYM: true,
            }],
            // ...
        ]);
    });

Что делаю не так?

Если правильно понимаю, мне надо заставить borschikInclude обрабатывать каждый js-файл (или файлы с определённым расширением) перед передачей в browserJs? Как?

Смотрел на:

Буквально на днях мы анонсировали библиотечку bem-font-awersome, которая предоставляет возможность использовать Font Awesome с использованием БЭМ-нотации и без необходимости тянуть лишние стили.

На этот раз мы пошли дальше и распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Новую библиотеку назвали bem-font-awesome-icons. Она предоставляет иконки в виде модификаторов блока icon в двух вариантах: как фоновая картинка (модификатор bg) и инлайном через шаблоны BEMHTML и BH, чтобы иконки можно было стилизовать через CSS (через модификатор glyph).

Поставляется библиотека через npm или bower.

Подробности см. в документации: https://github.com/tadatuta/bem-font-awesome-icons

UPD: Опубликовали видео.

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

Мы расскажем:

  • О новостях БЭМ из мира React. О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
  • О сборке веб-приложений из блоков в общем и о сборке БЭМ-проектов с помощью Gulp (а, возможно, и ENB) в частности. Спикер Дима Андриянов.

BEMup пройдет в пятницу, 24 марта в московском офисе Яндекса с 19:00 до 22:00.

Регистрация уже открыта: https://events.yandex.ru/events/bemup/24-march-2017/ Присоединяйся!

Stay BEMed!

UPD: Опубликовали альтернативный вариант, см. https://ru.bem.info/forum/1274

Привет!

Мы написали скрипт, который нарезает стили Font Awesome на отдельные файлы и раскладывает их по БЭМ методологии:

fa/
    fa.css # общие стили
    _icon/
        fa_icon_500px.css
        fa_icon_address-book-o.css
        fa_icon_address-book.css
        fa_icon_adjust.css
        fa_icon_adn.css

Соответственно использование в BEMJSON выглядит так:

{ block: 'fa', mods: { icon: '500px' } }

А в HTML:

<div class="fa fa_icon_500px"></div>

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

Для это потребуется установить библиотечку к себе на проект: npm i bem-font-awesome --save и добавить ее в сборку в качестве уровня переопределения.

Исходники лежат тут: https://github.com/tadatuta/bem-font-awesome

UPD: Изменилась дата проведения вебинара: 29 марта, 18:00. Ссылка на трансляцию обновлена.

29 марта, Антон Виноградов расскажет про новую для БЭМ-сообщества библиотеку bem-react-core, которая позволяет разрабатывать веб-приложения с использованием React и БЭМ-методологии.

Если вы уже знакомы с методологией и библиотекой от Facebook, то самое время начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения.

В рамках вебинара:

  • рассмотрим внутреннее устройство библиотеки;
  • расскажем основные принципы работы;
  • разработаем веб-приложение на основе create-bem-react-app-генератора.

Трансляция начнется 29 марта в 18:00 на отдельной странице. https://www.youtube.com/watch?v=UeqPPkGXmbE

Как мы уже писали, в конце месяца мы проведем очередной BEMup.

Все, кому интересны новости БЭМ и мира React, — welcome! Некоторое время назад мы анонсировали библиотеку bem-react-core, которая позволяет декларативно работать с React-компонентам в рамках БЭМ-методологии. С того момента прошло достаточно времени, и многое изменилось. Антон Виноградов расскажет, что появилось нового, и как боролись со старым:

  • поддержка HOC;
  • сокращенный синтаксис модификаторов;
  • тесты;
  • create-bem-react-app;
  • поставка дистрибуционного пакета;
    • целая пачка мелких улучшений и фиксов.

Задавай свои вопросы в комментариях к посту, и спикер постарается ответить на них в своём выступлении.

Уже в конце месяца мы проведём очередной BEMup. В этот раз мы решили рассказать про спикеров и доклады ещё до официального анонса и открытия регистрации.

Дима Андриянов расскажет всё про сборку веб-приложений из БЭМ-блоков с помощью Gulp и, возможно, ENB.

Если у тебя есть вопросы по этой теме, можешь писать их в комментариях к этому посту. Тогда докладчик ответит на них во время своего выступления.

Уважаемые бэмчане,

не сочтите за оффтоп, но хотелось бы услышать ваше мнение. Angular2 и Vue, например, имитируют scoped css через присваивание уникального атрибута всем тегам и добавление его же к селекторам в css. Возникла идея сделать эти трансформации приближенными к бэм методологии. Представьте, что у нашей компоненты шаблон и стили такие:

<section class='product'>
    <header class='title'>
        Foo 
        <span class='hint'></span>
    </header>    
</section>

.product { /* ... */ }
.product .title { /* ... */ }
.product .title .hint { /* ... */ }

Тогда пропустив шаблон и стили через наш преобразователь получим следующее:

<section class='product_ABC product'>
    <header class='product_ABC__title title'>
        Foo 
        <span class='product_ABC__title_hint hint'></span>
    </header>    
</section>
.product_ABC { /* ... */ }
.product_ABC__title { /* ... */ }
.product_ABC__title_hint { /* ... */ }

Принцип прост, по возможности заменить и сделать стили плоскими. Сохранить изначальный селектор Элементов и пройтись по шаблону Добавив новые имена классов. Изначально селекторы всегда вида: BLOCK(…modifiers) ELEMENT(…modifiers) … . Модификаторы мы не изменяем. В следующем примере селектор плоским сделать мы не можем, так как он зависит от состояния родителя:

.product.active .title {}

.product_ABC.active .product_ABC__title { }

Плюсы данного подхода:

  • Разработка блока/компоненты не зависит от инструментария, как Css Modules, например
  • Все стили после сборки под селекторами с уникальной солью - нет коллизий
  • Все селекторы максимально плоские - хорошо для производительности
  • Минимальная специфичность селекторов - хорошо для переопределения
  • Все изначальные классы в html остаются не тронуты - если вдруг нам нужно искать элементы из js, добавлять модификаторы, или определять новые стили по этим селекторам.

Недостатки:

  • Работает в компонентной архитектуре, где шаблон инкапсулирован в отдельный блок.

Дополнительно:

  • Можно от соли отказаться, и гарантировать уникальность блоков самому, тогда селекторы всегда будут детерминированны.
  • Можно ввести некоторые соглашения об именах на случай каких либо "edge case".
  • Можно от имени блока отказаться и генерировать его другим способом, а в стилях использовать ":host" для его стилизации.

Простите, что возможно сумбурно выразился, старался как можно компактнее подать идею. Есть ли у кого-то мысли по этому поводу?

Всем привет! Мне нравятся иконки Font Awesome, но не нравится подключать файлы расположенные на другом хосте, так же как и копировать все подряд. Это субъективное мнение, можно сказать личное предпочтение. Еще не всегда существуют в одной библиотеке все иконки которые нужны. Принято решение использовать кастомную накопительную библиотеку SVG-иконок. И конечно же использование по БЭМ-методологии. Хочу поделиться мыслями.

Реализация:

1) Каждая иконка является модификатором блока icon cтруктура папок:

    common.blocks/
        icon/
            _rub/
            _search/
            ...

2) На уровне common.blocks в папочках модификатора лежат файлики bemhtml.js, пример icon_rub.bemhtml.js:

block('icon')(
    mod('rub')(
        content()('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595 776"><defs><style>.icon_color{fill:#201600;fill-rule:evenodd;}</style></defs><title>rub_sign_1</title><path class="a" d="M573.39,118.92c-7.81-20.13-40.26-56.55-52.25-67.71-19.41-18.06-51.76-37.66-80.31-43.69C420.27,2.26,390,0,351.19,0L49.75,2V333.47H.5V440.09H49.75v39.67H.5V588.38H49.75V776H173.18V588.38H445.75V479.76H173.18V440.09H358c83.62-3.76,138.79-26.92,179.17-69.49,35.55-43.21,58.29-80.07,58.29-146.3,0-38.39-10.69-73.76-22.11-105.37ZM450.82,300.59h0c-21.69,24.84-38.48,26.91-91.63,32.88h-186v-226H357.47c35.4,0,57.94,8.26,70.5,12.77,20.52,10.86,26.19,18.07,33.1,25.91,14,23.1,22.84,40.18,22.84,71.79C480.5,266.5,471.37,276.5,450.82,300.59Z" transform="translate(-0.5)"/></svg>')
    )
);

3) На уровне desktop.blocks и пр. в папочках модификатора лежат стили icon_mods.post.css, пример icon_rub.post.css:

.icon_rub svg .icon_color
    fill #333
    stroke #333

.icon_rub svg
    margin 0
    height 21px

@media (--xlarge-only) {
    .icon_rub svg {
        height 19px
    }
}

@media (--large-only) {
    .icon_rub svg {
        height 15px
    }
}

со стилями цвета может перемудрил )))

4) В bundles файлике page.bemjson.js декларируется блок иконки:

{
    block : 'icon',
    mods : { rub : true }
}

Люди, хочется верить что схема идеальная, поправьте - если что не так.

Добрый вечер, подскажите пожалуйста есть ли в стеке bem библиотека tab? Найдя ссылку на одно из библиотек: https://github.com/bem-contrib/hackaton/tree/master/common.blocks/tabs, столкнулся с такой проблемой, что переключения вроде бы и есть, но переключение срабатывает только в 1 случае (Идёт смена контента), при дальнейших дейтсвиях, появляются уже оба контента.

Добрый день! Есть такая конструкция:

<div class="block1">
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":1}}'>содержимое первого элемента</div>
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":2}}'>содержимое второго элемента</div>
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":3}}'>содержимое третьего элемента</div>
</div>

Возникла проблема получить параметр id у элемента достигнувшего верхней границы.На события скролла у родительского блока подписался.

Видится мне это так, но не уверен:

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

  • определить высоту активного элемента(будем считать что модификатор ему присвоили как активный те он достиг верхней границы)

  • получить params.id только для элемента с активным модификатором.

Как быть? Я создал один блок basis В блоке basis создал два модификатора _type_header и _type_footer И сделал я это только для того, что бы в папку блока basis положить общий фон для header и footer Чувствую, что это в корне не верно. Но увы...правильного выхода из этой ситуации не могу найти. Что подскажите, как поступать в таких случаях?

Не могу понять, как правильно найти блок content.

Имеется div:

<body>
 <div class="content i-bem content_js_inited" data-bem="{&quot;content&quot;:{}}"><div class="content__wrap"></div></div>
<div class="modal modal_theme_islands modal_has-close popup i-bem modal_js_inited popup_js_inited modal_has-animation" data-bem="{&quot;modal&quot;:{},&quot;popup&quot;:{&quot;zIndexGroupLevel&quot;:20}}" role="dialog" style="z-index: 21001;" aria-hidden="true"><div class="modal__table"><div class="modal__cell"><div class="modal__content"><div class="info_modal info_modal_size_s"><div class="info_modal__content">Пароль неверный</div><div class="modal_button modal__close"><button class="button button_theme_islands button_type_app app i-bem app_js_inited button_js_inited" data-bem="{&quot;button&quot;:{},&quot;app&quot;:{&quot;controller&quot;:&quot;zfclogin&quot;,&quot;action&quot;:&quot;auth&quot;}}" role="button"><span class="button__text">Ок</span></button></div></div></div></div></div></div>
</body>

То есть, у нас вызвалось модальное окно, в нём есть метод: modal_has-close и внутри модалки, есть кнопка - button, к которой примексован блок 'app'.

При нажатии, выполняется закрытие окна и по сути, выполняется метод app:

modules.define(
    'app',
    ['i-bem__dom', 'location', 'jquery', 'control', 'CryptoJSAes'],

    function(provide, BEMDOM, location, $, Control, CryptoJSAes) {

        provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, {
            onSetMod: {
                'js' : {
                    'inited' : function() {
                        this._content = this.findBlockOutside('content');
                        this.bindTo('pointerclick', this._onAppLoad);
                    }
                }
            },

            _onAppLoad: function() {
              this._content._onGetLoad({'loader' : true});
            },
        }));
    }
);

То есть, при клике на примексованный app к кнопке, выполняется функция _onAppLoad. В inited ищеться блок 'content' и выполняется функция _onGetLoad. findBlockOutside, не выполниться, в сферу того, что 'content' изнутри блока app, но изнутри app у нас modal только. Идёт вопрос, как найти блок 'content' и выполнить исходя из найденного блока - функцию?

Добрый день, столкнулся с такой проблемой:

Имеется блок form

<form class="form form_type_register info-modal i-bem form_js_inited info-modal_js_inited" data-bem="{&quot;form&quot;:{&quot;controller&quot;:&quot;zfclogin&quot;,&quot;action&quot;:&quot;register&quot;},&quot;info-modal&quot;:{}}">
    <div class="form__content">
        <div class="form__label">
            <div class="form__label_text">Почта:</div>
            <div class="form__label_input form__label_email">
                <span class="input input_theme_islands input_size_m input_type_text input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="email" autocomplete="off" type="text">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__label">
            <div class="form__label_text">Пароль:</div>
            <div class="form__label_input">
                <span class="input input_theme_islands input_size_m input_type_password input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="password" autocomplete="off" type="password">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__label">
            <div class="form__label_text">Повтор:</div>
            <div class="form__label_input">
                <span class="input input_theme_islands input_size_m input_type_password input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="passwordVerify" autocomplete="off" type="password">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__button">
            <button class="button button_theme_islands button_size_l button_type_submit button_view_dark button_width_available button__control i-bem" role="button" type="submit" data-bem="{&quot;button&quot;:{}}">
                <div class="button__text">Завершить</div>
            </button>
        </div>
    </div>
</form>

С набором label и input.

Так вот, на кнопку submit навешивается дейтсвие bindTo('submit') и выполнятся функция:

_onGetRegisterMethod:function() {
  var data = {"email":"error","password":"error"}
  for(var data in json) {
                    if(this.elem('label_'+data)) {
                        this.elem('label_'+data).addClass('form_error');
                    }
                }
}

То есть, в

<div class="form__label_input form__label_email">...</div>

добавляется класс form_error. Вопрос в том, как именно в блок input, где элемент __icon добавить к примеру, текст, чтобы имеено в нужной блоке form__label_input form__label_n был добавлен текст в блок input__icon.

Всем привет!! Понимания схемы работы динамического сайта - нет. Есть понимание работы динамических страниц сайта в схеме:

  • MySQL(db) -> PHP ->HTML. В такой схеме робот индексирует страницу как HTML. Предполагаю что схема выглядит так:
  • MySQL(db) -> BEMTREE -> BEMJSON -> HTML А как происходит при схеме по БЭМ-шаблонам? Как индексируются сайты с движком JS, вместо PHP ???

Добрый день! Выдается такая ошибка Module "profit-metal": can't resolve dependence "BEMHTML"

при подключении технологии в файле js modules.define('profit-metal', ['i-bem-dom','BEMHTML', 'jquery'], function(provide, bemDom, BEMHTML, $)

кэш чистил, пробовал такой вариант, ошибка весит.

({
    tech : 'js',
    mustDeps : [
        { tech : 'bemhtml', block : 'i-bem' }
    ]
})

Привет!

Мы, наконец, выпустили bem-history v4.0.0. История изменений.

По просьбе в нашем Телеграмм-чатике опубликовали мини-библиотечку bem-calendar с календарем на основе bem-components.

Выглядит он вот так: desktop_en

Пользуйтесь на здоровье!

Привет всем. Как есть сейчас:

  • В каждый CSS пишу @import "../../node_modules/sharps/common.blocks/mq/mq.post.css". В итоге при сборке mq попадает в *.css, какой и нужен. Интуитивно понимаю - добавлять в каждый CSS @import не очень хорошо, и надоело уже.

Вопрос:

  • Как сделать @import во все CSS разом?

Есть предположения - в Gulpfile это указать, но как именно указать я не знаю.

(Думаю, что фронт-эндщикам, использующим bemto, понадобится.) Небольшой плагин для Sublime Text для превращения jade/pug+bemto разметки в stylus, работающий через каноничный буфер обмена. Основная его цель - уменьшить затраты времени на ручную запись стилей. Просто копируем код, вставляем сразу стили.

На ГитХабе: https://github.com/hpr895/bemto_to_stylus

Для установки необходимо:

  1. Подключить тот замечательный плагин "bemto" к проекту.
  2. Скопировать "bemto_to_stylus.py" в папку "Sublime Text 3\Packages\User"
  3. Настроить горячую клавишу для плагина: { "keys": ["ctrl+t"], "command": "bemto_to_stylus" },

Готово. Делаем bemto разметку, копируем, и вставляем через горячую клавишу.

Сам код плагина не совсем точный, но работает вполне надёжно. В принципе можно сейчас думаю сделать словарь для автоматического подставления миксинов в этом же плагине. К примеру, если плагин видит слово +e.link, то он будет в stylus разметке под классом вставлять и соответствующий миксин: .block &__link +link()

Недавно пришлось пописать на PUGJS... долго не смог это терпеть. Пришлось запилить 100 строчек кода, что бы писать нормальные шаблоны на BEMHTML в ExpressJS.

Код доступен как модуль https://www.npmjs.com/package/express-bem-xjst

Он умеет правильно работать с уровнями, кешируется и даже ничего не портит. Пробовал подключать bem-components — шаблонизирует все правильно.

Приятного использования тем, кто больше не может использовать ничего кроме BEM-XJST в шаблонах 😉

Добрый день.

Осваиваю БЭМ совсем недавно, появился вопрос, ответ на который не удалось найти в доках.

Допустим, имеется простенькая разметка (https://jsfiddle.net/ao3xLbue/) элемента формы .form-el с модификатором label в значении hidden. При этом элемент label скрывается. Теперь эту конструкцию поместили в блок .form, где поведение для .form-el_label_hidden должно быть переопределено. Пусть элемент label при этом становится зелёным, а не скрывается. В голову приходит только каскад .form .form-el_label_hidden .form-el__label { ... }. Как обойтись без него? Может быть какой то хитрый микс придумать, который "залазит" внутрь блока .form-el? В примерах обычно миксуется всё на уровне блока, а не его внутренностей.

Спасибо.

Если кому вдруг понадобится: https://github.com/zakaratcha/screen-keyboard

Есть стандартная базовая конфигурация, внешний вид и наборы клавиш для которой позаимствованы с главной страницы Яндекса. Для большинства проектов она будет явно избыточной, поэтому есть пара примеров с реализацией попроще.

Добрый день, столкнулся с такой проблемой:

Имеется блока "content" - <div class="content i-bem"><div class="content__wrap">...</div> и его js:

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

    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function () {
                    this._loader = this.findBlockInside('loader');
                    location.on('change', this._onChangeLocation, this);
                }
            },

            loading: {
                true: function () {
                    this._loader.setMod('progress', true);
                },

                '': function () {
                    this._loader.delMod('progress');
                }
            }
        },

        _loadIssues: function (options) {
            var uri = location.getUri();
            options.url = uri.getQuery();
            this._sendRequest(options);
        },

        _onChangeLocation: function (e, state) {
            var uri = location.getUri(),
                options = {};

            this._loadIssues(options);
        },

        _sendRequest: function (options) {
            this._abortRequest();

            this.setMod('loading', true);

            this._xhr = $.ajax({
                type: 'POST',
                dataType: 'html',
                url: options.url,
                data: {
                    jsonContent: true,
                },
                cache: false,
                context: this
            }).fail(function () {
                console.log(fail);
            }).done(function (html) {
                this._onSuccess(html);
            })
            .always(function () {
                this.delMod('loading');
            });
        },

        _abortRequest: function () {
            this._xhr && this._xhr.abort();
        },

        _onSuccess: function (html, type) {
            type = type || 'update';
            this._render(html, type, 'wrap');
        },

        _render: function (html, addMethod, elem) {
            var wrap = (elem && this.elem(elem)) || this.domElem;

            BEMDOM[addMethod](wrap, html);
        }
    }));
});

Суть проблемы в том, что когда мы подгружаем какой-то блок через ajax (Пусть будет "base"), 1 раз live функция срабатывает, но если вдруг мы вызовем другой блок (base1) и затем заного base, тот функция live уже не срабатывает, в следствии чего, не срабатывает и функция. (Пример) :

modules.define('base', 
    ['i-bem__dom', 'BEMHTML', 'jquery', 'events__channels',  'base-rows'],
    function(provide, BEMDOM, BEMHTML, $, channels) {
        provide(BEMDOM.decl(this.name, {
            onSetMod: {
                'js' : {
                    inited: function() {

                    }
                }
            },

            _onScroll: function() {
                $('.base-body').scrollbar();
                $('.base-body').height($(window).height() - 195);
                $('.base-body').scrollbar();
                $(window).resize(function () {
                    $('.base-body').height($(window).height() - 195);
                });
            },

            _getBaseUpdate: function() {

            }
        }, {
            live: function() {
                this.prototype._onScroll();

                this
                    .liveBindTo('update', 'pointerclick', this.prototype._getBaseUpdate());
            }
        }));
    }
);

Первый раз, когда мы подгружаем блок <div class="base i-bem">...</div>, функция live срабатывает и вследствии чего, функцию _onScroll он вызывает, он если мы вызовем другой блок через ajax, а потом заново base, то уже функция _onScroll не срабатывает.

Подскажите, пожалуйста, как можно сделать, чтобы при каждом вызове через ajax, блок base, срабатывала автоматически функция _onScroll.

Внезапно, пятничным вечером мы обновили БЭМ в вашем React.

Состав изменений:

И, конечно, мы обновили документацию, где очень подробно про все написали на русском и английском языках ;)

Привет!

Наверняка не все знают, что библиотека bem-core помимо прочего предоставляет специальный блок i18n для перевода интерфейсов на разные языки.

Использовать его можно как в клиентском JavaScript, так и в шаблонах.

Однако процесс конфигурации сборки может вызывать затруднения у новичков. Поэтому в наших проектах-заготовках есть ветки i18n, где все уже настроено и приводятся минимальные примеры использования для разных технологий:

Если вы только начинаете свой мультиязычный проект, просто склонируйте ветку i18n из подходящего репозитория. Если же вы хотите добавить поддержку переводов на существующий, вам поможет изучение последнего коммита в этой ветке.

раньше было так:

this.block = this.findBlockInside('block');

в bem4 приходится делать так:

this.block = this.findChildBlock(bemDom.declBlock('block', {}));

Можно ли сделать так же просто, как было раньше?

Добрый день! С обновлением документации и помощью на форуме уже стало все намного яснее, но иногда возникают вопросы.

Сделал страничку, в шапке разместил блок, по клику на который вызываю модальное окно с корзиной.

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