Здравствуйте всем! При прохождение руководства "Создаем свой проект на БЭМ" я столкнулся с проблемой. Я шел по этому руководству, ничего не пропускал и в разделе "BEMHTML-шаблоны" в файл goods.bemhtml я написал/вставил нужный код, а затем решил посмотреть как выглядит index.html и заместо ожидаемого содержимого увидел такую ошибку: http://firepic.org/images/2014-09/14/m707f9za5aj0.png Полез в доки, там черным по белому написано также. Если убрать this.ctx.url и написать, к примеру, какую-нибудь строку типа "test", то все в порядке и страничка index.html отображается нормально.
Есть БЭМ блок, у которого прописаны свои поведения. Изначально его на странице нет. но в deps он прописан поэтому все исходники подгружаются. Так вот. Надо чтобы по событию нажатия кнопки, в DOM добавлялся этот блок. Таких блоков может быть добавлено много. Необходимо чтобы он при всем при том еще и работал. Каким образом это сделать?
Подскажите как создать блок BEM (в идеале из BEMJSON) в runtime, например по событию нажатия на кнопку, и добавить его в к содержимому другого блока.
Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>
Я создаю блок bem create -l desktop.blocks -b yashare с содержимым
# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
tag()('div'),
bem()(false),
cls()('yashare-auto-init'),
attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)
/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
loader('//yandex.st/share/share.js', provide);
});
А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?
Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.
В качестве виджета может быть и другой, главная задумка, что скрипт подключается единожды независимо от количества блоков (виджетов) на одной странице.
P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации - очень высокий порог вхождения...
Есть два блока которые должны ловить события третьего блока:
Блок который по какой-то причине не ловит события
BEM.DOM.decl('events', {
onSetMod: {
'js': function ()
{
this._invisible();
BEM.DOM.blocks['chek-type-redaktor'].on('change_area', this._invisible, this);
BEM.DOM.blocks['chek-type-redaktor'].on('change_events', this._visible, this);
}
},
_visible: function ()
{
this.setMod("hidden", "false");
},
_invisible: function ()
{
this.setMod("hidden", "true");
}
}, {
live: false
})
Блок который прекрасно ловит события
BEM.DOM.decl('area', {
onSetMod: {
'js': function ()
{
BEM.DOM.blocks['chek-type-redaktor'].on('сhange_area', this._visible, this);
BEM.DOM.blocks['chek-type-redaktor'].on('сhange_events', this._invisible, this);
}
},
_visible: function ()
{
this.setMod("hidden", "false");
},
_invisible: function ()
{
this.setMod("hidden", "true");
}
}, {
live: false
})
Блок который генерирует БЕМ события
BEM.DOM.decl('chek-type-redaktor', {
onSetMod: {
'js': {
'inited': function ()
{
console.log("chek-type-redaktor active");
}
}
},
onChange_area: function ()
{
this.trigger('сhange_area');
},
onChange_events: function ()
{
this.trigger('сhange_events');
}
}, {
live: function ()
{
this.liveBindTo("change-area", 'click', function (e)
{
this.onChange_area(e);
});
this.liveBindTo("change-events", 'click', function (e)
{
this.onChange_events(e);
});
return false;
}
});
Блоки в bemjson
{
block: 'area',
js: true
},
{
block: 'events',
js: true
}
В чем причина того то блок events не ловит события блока chek-type-redaktor, а блок area прекрасно ловит?
https://github.com/bem/bem-tools/pull/271
// cc @arikon @zxqfox