Допустим у нас есть блок phones
, в котором несколько item
.
Есть несколько элементов: title
,description
,image
, button
. Элемент button
в свою очередь содержит блок button
из bem-components
.
В index.bemjson.js
описываем следующим образом
...
{
block: 'phones',
phones: [
{
title: 'Apple iPhone 4S 32Gb',
image: 'http://mdata.yandex.net/i?path=b1004232748_img_id8368283111385023010.jpg',
price: '259',
url: '/'
},
{
title: 'Samsung Galaxy Ace S5830',
image: 'http://mdata.yandex.net/i?path=b0206005907_img_id5777488190397681906.jpg',
price: '73',
url: '/'
}
]
}
...
В phones.bemhtml следующим
...
block('phones')(
content()(function() {
return this.ctx.phones.map(function(item){
return [
{
elem: 'item',
content: [
{
elem: 'title',
content: item.title
},
{
elem: 'image',
url: item.image
},
{
elem: 'price',
content: item.price
},
{
elem: 'button',
content:
{
block: 'button',
url: item.url,
text: 'Купить',
}
}
]
}
];
});
})
);
...
Вопрос: Как сделать так, чтобы кнопка отображалась только тогда, когда это необходимо? То есть могут быть элементы item
с кнопкой, а могут быть и без кнопки.
Как сделать внутреннюю логику никак не могу понять. Вариант с добавлением модификатора, который делает display:none
мне не нравится. Думаю лучше будет реализовать как-то иначе.
1) Добавить в BEMJSON флаг:
2) Проверять его в шаблонах: