Есть код в рамках модуля (не знаю, как обратиться в рамках БЭМ к хрефу, поэтому по старинке):
var
afishaLoc = '#afisha',
loc = window.location.hash;
if(loc == afishaLoc) {
$('a[href="' + afishaLoc + '"]').parent('li').click();
}
this.bindTo('item', 'click', function(e){
console.log('Click!');
}
Условие выполняется, но клик почему-то не происходит. li имеет класс block-name__item
Всем доброго времени суток. У кого есть готовый вариант модуля с YouTube iframe api https://developers.google.com/youtube/iframe_api_reference?hl=ru#Requirements ? Или может кто-то подскажет, как его разместить в рамках модуля? А то помещая код в модуль, он или не выполняется или выдаёт ошибку, хотя при инлайновой вставке на страницу, все нормально.
Всем доброго времени суток. Очень понравилась работа вашего фреймворка i-bem.js. У нас на новом проекте пока-что используются наименования классов по БЭМ и сейчас налаживается работа фронтенда. В качестве работы с js хотелось бы выбрать ваш фреймворк, так как он наиболее полно дает возможности модульной разработки js кода, но пока-что никак не удается найти способ работать именно с ним. Во всех примерах, что мы нашли, включается в разработку автоматическая сборка HTML и вообще, разделение кода страниц на отдельные папки и файлы. Этот вариант нам не подходит, так как серверной частью у нас будет заниматься PHP фреймворк Symfony и собираться страницы будут шаблонизатором Twig. По-этому, прошу у вас помощи разобраться, как внедрить во фронт проекта ваш фреймворк для модульного js, при этом оставив файловую структуру и все остальное (кроме нейминга) своим.
P.S. на начальном этапе, весь css и js у нас будет собираться каждый в один файл грантом.
Всем привет!
Сегодня мы зарелизили bem-core@v4.0.0-rc.1.
Это релиз-кандидат большого релиза bem-core@v4.0.0, который появится совсем скоро.
Мы сделали достаточно большое количество обратно несовместимых изменений, ради того, чтобы API стало легче понять, запомнить и удобнее использовать.
Уже доступен миграционный гайд и обновлённая документация на i-bem.js. Если вы не используете bem-components, то можно начинать изучать, крутить, вертеть и подключать к своим проектам новую версию bem-core.
Что нового и важного:
Значительно упрощено и унифицировано API работы со всеми видами событий:
this._domEvents().on('click', this._onClick);
this._events(this.findChildBlock('button')).on('click', this._onButtonClick);
Кроме того, теперь все основные способы использования не требуют самостоятельного удаления подписок при уничтожении экземпляра — отписка происходит автоматически. Подробнее в миграционном гайде.
i-bem и i-bem-dom и стали частью ядра. Теперь с элементами работать так же удобно, как с блоками:this.findChildElem('button').setMod('disabled');
Подробнее в миграционном гайде.
Функциональность элемента collection блока i-bem перестала быть опциональной. Все методы, возвращавшие несколько БЭМ-сущностей, теперь возвращают коллекции:
this.findChildBlocks('control').setMod('disabled');
live) разделена на две отдельные части — поле lazyInit и метод onInit(). Более явные названия без смешивания в одном месте двух вещей. Подробнее в миграционном гайде.Все подробности о миграции на новую версию читайте в миграционном гайде. А документация на i-bem.js уже содержит полностью обновлённую информацию.
Мы просим вас писать нам любой фидбек о найденных ошибках и проблемах на форум или сразу в тикеты, чтобы мы могли сделать обратно несовместимые исправления до полного релиза bem-core@v4.0.0.
P. S. Релиз-кандидат bem-components с bem-core@v4 внутри будет в ближайшее время. Также мы ещё допишем английскую версию документации, чейнджлог и миграционный гайд.
Наверное все кто используют IDE, а не emacs сталкивались с проблемой, что IDE совсем не понимает BEM блоки. Это все связано с особенностями реализации наследования внутри bem-core - inherit.
При помощи JSDoc я всячески стараюсь объяснить IDE что же такое BEM-block. Но, увы 100% результат пока не достиг, имеются недостатки. Вот пример того как я описываю блоки:
/**
* @module myBlock
*/
modules.define('myBlock', ['i-bem__dom'], function(provide, BEMDOM) {
/**
* @augments BEM
* @bem
*/
var myBlock = BEMDOM.decl(this.name, /** @lends myBlock.prototype */ {
onSetMod: {
js: {
/**
* @constructs
*/
inited: function() { /* some code goes here */ }
}
}
}, /** @lends myBlock */ {
live: function() {
this.liveBindTo('some-elem', 'click', this.prototype._onSomeElemClick);
}
});
provide(myBlock);
});
Подробнее:
BEM и предлагает нам называть блоки через тире, то JSDoc в именах классов тире не понимает, и напроч забивает на весь последующий код.BEMDOM.decl надо класть в переменную, если сразу положить в provide работать не будет.В целом данная схема оформления позволяет комфортно работать с прототипной частью блока, что касается live, там я пока не нашел решения.
Я не нашел никакого способа объяснить IDE, что эта часть наследуется от BEMDOM и BEM одновременно, но только от их статической части. Кажется к такому JSDoc не готов. В связи с чем у меня IDE не понимает что this.prototype, это прототип нашего же блока.
Сам я недавно стал заморачиваться с JSDoc и еще многого про него не знаю. Если у вас есть идеи как усовершенствовать описание блоков буду рад любой информации/критике
Всем привет. На прошлой неделе обновил node.js до 5.8 и после этого похоже перестала ставиться bem-core. Я вообще ноль в node.js, но приходится с ним работать =( пытаясь разобраться в БЭМ
Для начала создал пустую директорию, куда по инструкции установки bem-core ошибки возникают в пунктах 3 и 4
3) alexander@achtung-PC:~/DeveloperWorkspace/WEB_BEM_PHP/bem-core$ npm run deps npm ERR! Linux 4.2.0-30-generic npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "deps" npm ERR! node v5.8.0 npm ERR! npm v3.7.3
npm ERR! missing script: deps npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request: npm ERR! /home/alexander/DeveloperWorkspace/WEB_BEM_PHP/bem-core/npm-debug.log
4) alexander@achtung-PC:~/DeveloperWorkspace/WEB_BEM_PHP/bem-core$ npm test
bem-core@2.9.0 test /home/alexander/DeveloperWorkspace/WEB_BEM_PHP/bem-core npm run lint && npm run test-all
bem-core@2.9.0 lint /home/alexander/DeveloperWorkspace/WEB_BEM_PHP/bem-core jshint-groups && jscs .
module.js:341 throw err; ^
Error: Cannot find module 'jshint'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.
npm ERR! Linux 4.2.0-30-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
npm ERR! node v5.8.0
npm ERR! npm v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! bem-core@2.9.0 lint: jshint-groups && jscs .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bem-core@2.9.0 lint script 'jshint-groups && jscs .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bem-core package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! jshint-groups && jscs .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bem-core
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bem-core
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request: npm ERR! /home/alexander/DeveloperWorkspace/WEB_BEM_PHP/bem-core/npm-debug.log npm ERR! Test failed. See above for more details.
про bemjson и про bemhtml понятно, а про js не понятно...
Здравствуйте. Извиняюсь, если писать вопросы начинающего сюда это спам. Подскажите, если не прав.
Начал разбираться с БЭМ библиотеками для PHP, имею знание о существовании библиотек =)
Мне удалось установить лишь первую библиотеку через composer(очень удобно), но если верно всё понимаю - ничего не будет работать как минимум без второй.
Вот тут в обсуждении мне подсказали, что есть библиотеки, используемые Node.js, а есть для PHP. Сам пока предпочитаю использовать голый PHP 5.6.
Второй и третьей библиотеки в composer не нашёл, в руководствах по использованию дано указание для установки использовать bower. Если верно понимаю, то composer это менеджер пакетов для PHP, а bower это менеджер пакетов для Node.js Возник диссонанс - зачем мне устанавливать что-то для PHP через bower? Наводит на мысль что делаю что-то неправильно. Вопрос может быть некорректным с высоты опыта опытных=), но хочу ликбеза.
По ссылке выложил свои действия по установке и пробе примеров указанных тут. Номер картинки - это шаг, номер действия. PHP Storm выругался на рисунках 4, 5 и 7, что удалось мне частично исправить на рисунках 8,9. Ну а результат сами видите.
Вопросы: 1) Какие библиотеки мне надо ещё установить и как не бояться bower, если он для работы с php тоже помогает? 2) Возможно это касается настроек самого PHP Storm, но по возможности хотелось бы знать, почему ваши примеры заставляют его ругаться?
В основе каждой страницы сайта лежит блок page. Как можно дополнить этот блок, чтоб добавить для него дополнительные теги?
Интересует возможность добавить ряд статичных meta-тегов в head, прописать favicon (может быть еще что то). Идея в том, чтобы задать все это в одном месте, а не прописывать в bemjson-е каждого бандла. Подобные вещи реализуются в BEMHTML-шаблонах. Но блок page уже имеет свой шаблон и нужно как то его дополнить, но при этом не сломать. Хотелось бы пример подобной реализации.
Спасибо!
Как добавить атрибут к тэгу html, используя блок page из bem-core?
Проверил возможность использовать БЭМ-стек в песочницах. Учитывая наличие dist-поставки bem-core-dist и bem-components-dist препятствий для этого быть не должно.
Бывает возникает желание проверить идею или что-то продемонстрировать. Использовать для этого песочницу, для работы в которой нужен только браузер, самое подходящие место.
Для эксперимента взял блок hello из статьи Собираем статическую страницу на БЭМ. Вот что получилось:
Шаблоны заворачиваем в модуль:
bemhtml
modules.define('BEMHTML', [], function (provide, BEMHTML) {
BEMHTML.compile(function() {
block('hello')(
js()(true),
tag()('form')
);
});
provide(BEMHTML);
} );
bh
modules.define('BH', [], function (provide, bh) {
bh.match('hello', function (ctx) {
ctx.js(true);
ctx.tag('form');
} );
provide(bh);
} );
Для возможности использовать bemjson реализовал блок:
/**
* @module bemjson
*/
modules.define(
'bemjson', ['i-bem__dom', 'BEMHTML'],
function(provide, BEMDOM, BEMHTML) {
/**
* @exports
* @class bemjson
* @bem
*/
provide(BEMDOM.decl(this.name, /** @lends bemjson.prototype */ {
onSetMod: {
js: {
inited: function() {
BEMDOM.replace(this.domElem, BEMHTML.apply(JSON.parse(this.domElem.text())));
}
}
}
}));
}
);
Пример использования:
<script type="text/bemjson" class="bemjson i-bem" data-bem="{"bemjson": {}}">
{
"block": "hello",
"content": ""
}
</script>
В проверенных песочницах все отлично работает. Plunker и CodePen дают больше свободы и поэтому больше подходят для экспериментов с БЭМ-стеком, а Pluker больше всего, потому что позволяет все разложить по отдельным файлам.
К сожалению в IE8 не работает хотя все необходимые ресурсы (shim, ie.css) для этого подключены в Plunker и CodePen кроме JSFiddle, ошибка:
'modules' is undefined
bemjson отдельным файлом в Plunker?UPD: v2
А не задумывались ли вы о самостоятельной i-bem.js? Так сказать лайт версия стека БЭМ. Очень часто встречаю файл scripts.js, main.js, с наиполнейшей лапшой из jquery плагинов, без ленивой инициализации и всех крутых штук которые умеет i-bem.js
Хочется в реакт проекте использовать весь браузерный js из bem-core + bem-components this.elem('foo') == что-то такое что реакту понятно
что бы рекваиришь *.browser.js из bem-components и оно работает в реакте
Никто не думал о подобном? Реально ли это? Что нужно предпринять?
Подключаю скрипты на страницу:
scripts: [{ elem : 'js', url : 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places' }],
scripts: [{ elem : 'js', url : 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' }],
смотрю исходный код, их нет. В чем причина?
как к body добавить onload="initialize()" ?
Планируется ли переход bem-core на нативные браузерные промисы? По сведениям caniuse уже 68% Браузеров имеют реализацию promise из коробки. Есть ли смысл использовать их, а если их нет, то в качестве полифила подключать vow?
Если есть причины почему не стоит так делать - хотелось бы услышать ваше мнение.
Есть у меня значит такая страктура:
blockA - подписывается как liveBindTo на change от инпута. Внутри по change эмитим событие change наверх. blockB - более высокоуровневый, работает с blockA. Делает this.liveInitOnBlockInsideEvent('change', 'blockA', function(e) { /* тут эмитим событие наверх this.emit('toggle'). Вот здесь я вылетаю каждый раз / }) blockC - еще более высокоуровневый. Работает с blockB. Делает this.liveInitOnBlockInsideEvent('toggle', 'blockB', function(e) { / И здесь тоже. */ })
По сути получается, когда я кликаю на чекбокс (blockA) и вот это вот все эмитит события на верх, оно пытается проинициализироваться на каждый следующий клик (change/toggle) хотя все блоки заинитились (blockA, blockB, blockC).
Пока залепил булевым локом на инстанс. Но ведь негоже.
Привет. Как запускать тесты только со своего уровня библиотеки?
Получается так что для наших тестов нужны шаблоны и js из bem-core, bem-comprnents. Соответственно эти уровни есть в конфиге для тестов. Сейчас как минимум в консоль валятся репорты со всех уровней.
Второй вопрос.
Сейчас некоторые тесты валятся, но эти тесты валятся если мы запускаем enb make specs со своего уровня библиотеки. если запускать внутри либ то все проходят нормально. Вопрос — как дебажить такое поведение?
В посте https://ru.bem.info/forum/686/#comment-153710450 я хотел узнать какую сетку ставить на БЭМ лучше. Определился c bem grid. НО... Как я не старался у меня не получилась ее нормально установить в project-stub У кого есть пошаговая инструкция по установке этой сетки. Хотя бы в двух-трех шагах, чтобы проверить все действия на практике.
PS: Мне нравится идея БЭМ, но пока что я не могу к ней приблизиться и на шаг.
Заранее большое спасибо!
Не могу понять как правильно реализовать сетку на подобии b-layout-table. Если теперь bem-bl разрабатывают на базе библиотеки bem-core, где лежит замена b-layout-table.
Добрый день! Возникла интересная ситуация после перехода с depsOld на deps. Сразу скажу мы используем самые свежие версии технологий и самого сборщика(enb).
Начала падать сборка styl файлов т.к блок 'page' попадает в конец deps файла, а в нем находятся переменные, функции, миксины и т.д. Это фича или баг :) ?
exports.deps = [
{
"block": "i-bem"
},
{
"block": "i-bem",
"elem": "internal"
},
{
"block": "inherit"
},
{
"block": "identify"
},
{
"block": "next-tick"
},
{
"block": "objects"
},
{
"block": "functions"
},
{
"block": "events"
},
{
"block": "i-bem",
"elem": "html"
},
{
"block": "i-bem",
"elem": "dom"
},
{
"block": "jquery"
},
{
"block": "loader"
},
{
"block": "loader",
"mod": "type"
},
{
"block": "jquery",
"elem": "config"
},
{
"block": "dom"
},
{
"block": "i-bem",
"elem": "dom",
"mod": "init"
},
{
"block": "i-ua"
},
{
"block": "i-jquery"
},
{
"block": "i-jquery",
"elem": "core"
},
{
"block": "ua"
},
{
"block": "page",
"elem": "css"
},
{
"block": "page",
"elem": "js"
},
{
"block": "b-wrapper"
},
{
"block": "b-header"
},
{
"block": "b-header-top"
},
{
"block": "b-header-top",
"elem": "region"
},
{
"block": "page"
},
{
"block": "b-radio",
"mod": "theme",
"val": "tower"
}
];
файл не стал весь копипастить, а только начало и конец.
А вот page.deps.js
({
mustDeps: [
{ block: 'i-bem', elems: ['html'] },
{ block: 'i-bem', elem: 'dom', mods: { init: 'auto' } },
{ block: 'i-ua' },
{ block: 'i-jquery', elems: 'core' }
],
shouldDeps: [
{
elems: ['css', 'js']
},
{
block: 'b-wrapper'
},
{
block: 'b-header',
},
{
block: 'b-content'
},
{
block: 'b-footer'
},
{
block: 'b-rouble'
},
{
block: 'b-link'
},
{
block: 'b-image'
},
{
block: 'b-media-cont'
}
]
})
А есть ли к методу BEMDOM.init обратный? Чтобы рекурсивно в DOM дереве занулить модификаторы js
Ставил несколько сборок и заметил, что после всех npm install и подобных команд не устанавливаются библиотеки bem-core и bem-components. Ставлю вручную, работает. Хотя в generator-project-stub выбираю установить bem-components.
Второй вопрос. Можно ли один раз скачать библиотеки, а потом просто указывать путь до них? Если да, то в какой файл и как правильно прописать путь, дабы экономить время и место?
Друзья, возник вот такой вопрос. Как при возникновении события добраться до стилей блока, на котором это событие возникло, и изменить какой-нибудь отдельный параметр.
Задача - хочу сделать DIV с горизонтальной прокруткой по скроллингу мыши. Для галереи картинок. Я сделал блок с overflow: hidden. В него вложил длинный блок из картинок. Теперь хочу по событию scroll менять параметр left для блока с картинками. Подписка на события вроде понятна, но в описании библиотеки jquery в bem-core события scroll нет. Чую, что в BEM есть нюансы в реализации такой функциональности.
В общем, подскажите пожалуйста, в какую сторону копать )
Использую плагин jQuery, который необходимо подключить в head. Я еще не очень хорошо владею конфигурацией сборщиков, прошу дать направление, куда копать.
В хроме при включенном asynс в dev-tools интерфейс замерзает при резолвинге модулей. Какие могут быть варианты решения проблемы кроме отключения галочки async?
Bem-core@2.7.0, ymodules@0.1.2
block('kg-appbar')(
js()(true),
tag()('header'),
elem('title').tag()('h1'),
elem('panel')(
tag()('nav'),
def()(function(){
return applyCtx({
elem: 'placeholder',
content: this.ctx
});
})
)
);
с 2.6.0 работало. после обновления:
RangeError: Maximum call stack size exceeded
at applyc (bundle.js:443)
at __$b37 (bundle.js:3822)
at __$g0 (bundle.js:4875)
at applyc (bundle.js:460)
at __$b89 (bundle.js:4225)
at applyc (bundle.js:573)
at __$b19 (bundle.js:3333)
at __$g0 (bundle.js:4688)
at applyc (bundle.js:460)
at __$b89 (bundle.js:4225)
Привет, всем! Мне необходимо разбить текст кнопки на два независимых элемента. Например, внутри кнопки написать "2 в третьей степени", чтобы число "2" имело свои стили, а степень свои.
Есть блок block-one, события которого слушаются в block-two через this.findBlockOn('block-one', 'block-one-elem).on('change', this._blockOneChanged, this). В bem-core изменился способ обращения к инстансу блока block-one в обработчике события.
Было:
_blockOneChanged: function(e) {
var blockOneInstance = e.block;
this._checkButtonsState(blockOneInstance);
},
Стало:
_blockOneChanged: function(e) {
var blockOneInstance = e.target;
this._checkButtonsState(blockOneInstance);
},
В руководстве по миграции есть только указание на «Доступ до DOM-элемента в обработчике события»
// cc @innabelaya
Господа, прошу руку помощи.
Имеется по минимуму: .bem/make.js
MAKE.decl('Arch', {
blocksLevelsRegexp: /^.+?\.blocks/,
bundlesLevelsRegexp: /^.+?\.bundles/,
getLibraries: function () {
return {
'bem-core': {
type: 'git',
url: 'git@github.com:bem/bem-core.git',
treeish: 'v2.6.0'
}
};
}
});
MAKE.decl('BundleNode', {
getTechs: function () {
return [
'bemjson.js',
'bemdecl.js',
'deps.js',
'js',
'bemhtml.js',
'css',
'html'
];
}
});
.bem/level.js
exports.getTechs = function () {
var techs = {
'bemjson.js': 'v2',
'bemdecl.js': 'v2/bemdecl.js',
'deps.js': 'v2/deps.js',
'js': 'v2/js',
'bemhtml.js': '../../bem-core/.bem/techs/bemhtml.js',
'css': 'v2/css',
'html': '../../bem-core/.bem/techs/html.js'
};
return techs;
};
exports.getConfig = function () {
return {
bundleBuildLevels: this.resolvePaths([
'../../bem-core/common.blocks',
'../../bem-core/desktop.blocks',
'../../common.blocks',
'../../desktop.blocks'
])
};
};
И три дерриктории для уровней common.blocks, desktop.blocks и desktop.bundles c файлами .bem/level.js в каждой (всё стандартно вроде бы =)) common.blocks/.bem/level.js, desktop.blocks/.bem/level.js desktop.bundles/.bem/level.js
exports.baseLevelPath = require.resolve("../../.bem/level.js");
bem make проходит на ура (bem-tools версии 0.10.0)
далее bem server
Иииии - при открытии странички в браузере падает ошибка
Uncaught ReferenceError: modules is not defined
Откуда ноги растут?
Буду очень благодарен за разъеснине либо ссылку.