VH
Size: a a a
2018 September 07
Р
Всем привет!
Недавно начал изучать бэм и возник вопрос, как мне в bemhtml не выводить какой то елемент?
Есть массив с данными и в одном из них указан путь до картинки (icon), а в доругом нет
пример:
// bemjson
{
block: 'block-list',
items: [{
title: 'Дома',
value: '23',
},
{
title: 'На улице',
value: '20',
icon: '/path/to/icon.svg'
}]
}
// bemhtml
block('block-list')(content()(function(){
return this.ctx.items.map(item =>{
return {
elem : 'item',
content: [{
elem: 'title',
content: item.title
},{
elem: 'value',
content: item.value
},{
elem: 'icon',
tag: img,
attrs: {src: item.icon}
}]
}
});
}));
В первом элементе будет пустой img
Я конечно могу в начале map проверять если есть item.icon, то верни с иконкой, в противном случае без, но тогда будет дублироваться elem: 'item' и тд
Недавно начал изучать бэм и возник вопрос, как мне в bemhtml не выводить какой то елемент?
Есть массив с данными и в одном из них указан путь до картинки (icon), а в доругом нет
пример:
// bemjson
{
block: 'block-list',
items: [{
title: 'Дома',
value: '23',
},
{
title: 'На улице',
value: '20',
icon: '/path/to/icon.svg'
}]
}
// bemhtml
block('block-list')(content()(function(){
return this.ctx.items.map(item =>{
return {
elem : 'item',
content: [{
elem: 'title',
content: item.title
},{
elem: 'value',
content: item.value
},{
elem: 'icon',
tag: img,
attrs: {src: item.icon}
}]
}
});
}));
В первом элементе будет пустой img
Я конечно могу в начале map проверять если есть item.icon, то верни с иконкой, в противном случае без, но тогда будет дублироваться elem: 'item' и тд
Р
2 вопрос :)
Можно ли в bemhtml возвращать другой блок
Пример:
block('block-list')(content()(function(){
return {
block : 'tile'
}
});
}));
который так же есть у меня
block('tile')(content()(function(){
return {
elem: 'title',
....
}
}));
У меня почему то возвращается просто блок tile, без моего шалона
Возможно упустил эти вещи в доке, если тыкните пальцем буду благодарен.
Можно ли в bemhtml возвращать другой блок
Пример:
block('block-list')(content()(function(){
return {
block : 'tile'
}
});
}));
который так же есть у меня
block('tile')(content()(function(){
return {
elem: 'title',
....
}
}));
У меня почему то возвращается просто блок tile, без моего шалона
Возможно упустил эти вещи в доке, если тыкните пальцем буду благодарен.
Возможно, просто забыл «упомянуть» этот блок в deps'ах блока block-list:
// block-list.deps.js
[{
shouldDeps: [
'title'
]
}]
Р
Т. е. тут просто сводится всё к проверке на наличие ключа у объекта.
Р
Всем привет!
Недавно начал изучать бэм и возник вопрос, как мне в bemhtml не выводить какой то елемент?
Есть массив с данными и в одном из них указан путь до картинки (icon), а в доругом нет
пример:
// bemjson
{
block: 'block-list',
items: [{
title: 'Дома',
value: '23',
},
{
title: 'На улице',
value: '20',
icon: '/path/to/icon.svg'
}]
}
// bemhtml
block('block-list')(content()(function(){
return this.ctx.items.map(item =>{
return {
elem : 'item',
content: [{
elem: 'title',
content: item.title
},{
elem: 'value',
content: item.value
},{
elem: 'icon',
tag: img,
attrs: {src: item.icon}
}]
}
});
}));
В первом элементе будет пустой img
Я конечно могу в начале map проверять если есть item.icon, то верни с иконкой, в противном случае без, но тогда будет дублироваться elem: 'item' и тд
Недавно начал изучать бэм и возник вопрос, как мне в bemhtml не выводить какой то елемент?
Есть массив с данными и в одном из них указан путь до картинки (icon), а в доругом нет
пример:
// bemjson
{
block: 'block-list',
items: [{
title: 'Дома',
value: '23',
},
{
title: 'На улице',
value: '20',
icon: '/path/to/icon.svg'
}]
}
// bemhtml
block('block-list')(content()(function(){
return this.ctx.items.map(item =>{
return {
elem : 'item',
content: [{
elem: 'title',
content: item.title
},{
elem: 'value',
content: item.value
},{
elem: 'icon',
tag: img,
attrs: {src: item.icon}
}]
}
});
}));
В первом элементе будет пустой img
Я конечно могу в начале map проверять если есть item.icon, то верни с иконкой, в противном случае без, но тогда будет дублироваться elem: 'item' и тд
Или можно так: написать отдельный шаблон для элемента
https://goo.gl/2mqMoi
icon и уже в нём проверять содержимое (если нет, ничего не выводить)https://goo.gl/2mqMoi
SS
@Realetive Спасибо большое добрый человек!
Р
@Realetive Спасибо большое добрый человек!
🤙
SB
AY
Сказали ХОЧЮ.
Айдишники привязаны к сущностям, и лучше вешать их по смыслу, и называть соотв.: entity_15 или user_154, но практической пользы от этого мало
𝖘𝖋
Айдишники привязаны к сущностям, и лучше вешать их по смыслу, и называть соотв.: entity_15 или user_154, но практической пользы от этого мало
Зато K P A C U B O. Спасибо!
VH
Пример хорошей верстки без БЭМ это Bootstrap.z
🤣
Р
Пример хорошей верстки без БЭМ это Bootstrap.
AC
Здравствуйте!
Я правильно понимаю методологию, что css-свойство border должно быть прописано для элемента, но не для блока, так как border это внешняя геометрия?
Я правильно понимаю методологию, что css-свойство border должно быть прописано для элемента, но не для блока, так как border это внешняя геометрия?
И🍆
Здравствуйте!
Я правильно понимаю методологию, что css-свойство border должно быть прописано для элемента, но не для блока, так как border это внешняя геометрия?
Я правильно понимаю методологию, что css-свойство border должно быть прописано для элемента, но не для блока, так как border это внешняя геометрия?
Под внешней геометрией, если я не ошибаюсь, подразумевались маргины и падинги и иже с ними
И🍆
Но чтобы наверняка, можешь сделать __inner и на него сделать бордер
AC
ну вот мне тоже так кажется, однако же в доках:
https://dimalepel.gitbooks.io/bem-metodologiya/part1/chapter1-2.html
Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.https://dimalepel.gitbooks.io/bem-metodologiya/part1/chapter1-2.html