Skip to content

Instantly share code, notes, and snippets.

@RubaXa
Created March 3, 2013 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RubaXa/5077273 to your computer and use it in GitHub Desktop.
Save RubaXa/5077273 to your computer and use it in GitHub Desktop.
<fest:template>
&bem b-datalist {
ctx.head ? &__head ctx.head
for item in ctx.items {
&__item item
}
ctx.foot ? &__foot ctx.foot
}
&bem b-datalist__item {
cols = $block.getCols();
mods: {
"first": $first && !$parent.head
"last": $last
"selected": $parent.selected[ctx.id]
}
cols.cbx ? &__cbx {
&cbx { checked: ctx.selected }
}
cols.pic ? &__pic {
style: "background-image: url('{$block.getItemPic(ctx)}');"
}
}
</fest:template>
<fest:template>
&bem cbx {
mods: {
"checked": ctx.checked
"disabled": ctx.disabled
}
&__checkmark {}
}
</fest:template>
<fest:template>
<fest:set name="cbx">
<div>
<fest:attributes>
<fest:if test="params.id">
<fest:attribute name="data-id">
<fest:value>params.id</fest:value>
</fest:attribute>
</fest:if>
<fest:if test="params.name">
<fest:attribute name="data-name">
<fest:value>params.name</fest:value>
</fest:attribute>
</fest:if>
<fest:if test="params.mnemo">
<fest:attribute name="data-mnemo">
<fest:value>params.mnemo</fest:value>
</fest:attribute>
</fest:if>
<fest:attribute name="class">
cbx
<fest:if test="params.mods">
<fest:value>' cbx_'+params.join(' cbx_')</fest:value>
</fest:if>
<fest:if test="params.checked">
<fest:space/>
cbx_checked
</fest:if>
<fest:if test="params.disabled">
<fest:space/>
cbx_disabled
</fest:if>
</fest:attribute>
</fest:attrbiutes>
<div class="cbx__checkmark"></div>
</div>
</fest:set>
</fest:template>
@eprev
Copy link

eprev commented Mar 4, 2013

Фест избыточен, но не настолько. В тулките модификаторы идут списком как в BEMJSON.

<fest:template>
    <fest:set name="cbx">
        <div class="cbx{ params.mods ? ' cbx_' + params.mods.join(' cbx_') : '' }">
            <div class="cbx__checkmark"></div>
        </div>
    </fest:set>
</fest:template>

@eprev
Copy link

eprev commented Mar 4, 2013

К тому же лучше сделать фест проще, чтобы можно было делать так:

<fest:template>
    <fest:set name="cbx">
        <div class="cbx{ params.mods ? ' cbx_' + params.mods.join(' cbx_') : '' }">
            <fest:attribute test="params.id" name="data-id" value="params.id" />
            <fest:attribute test="params.name" name="data-name" value="params.name" />
            <fest:attribute test="params.mnemo" name="data-mnemo" value="params.mnemo" />
            <div class="cbx__checkmark"></div>
        </div>
    </fest:set>
</fest:template>

@RubaXa
Copy link
Author

RubaXa commented Mar 4, 2013

Антон, я привел реальный пример, cbx{ params.mods ? ' cbx_' + params.mods.join(' cbx_') : '' } — не канает, обычно всё сложней.

Но, то что ты привел в пример нужно сделать, это уже лучше, намного.

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

@eprev
Copy link

eprev commented Mar 4, 2013

Пока с params.mods проблем не было. В атрибут class нельзя давать писать что-угодно, только через mods и mixin какой-нибудь.

Код медленный на сетах и гетах, да. Какие предложения?

Мое видение такое. БЭМ блок должен остаться функцией - по сути обычный set. Компилятор должен инлайнить get безусловных блоков, которые используются только один раз. То есть даже целый БЭМ блок может оказаться инлайном, что гуд. Инлайн в данном случае означает: не откладывать вызов блока на конец шаблона, а вызывать по месту использования. Можно пойти еще дальше, и инлайнить без вызова - прямо код, но нужно как гарантировать целостность контекста, ведь в сетах может быть fest:script с локальным переменными. Такую оптимизацию можно сделать по-желанию, и придерживаться стиля именования переменных в скриптах с префиксами - имена блоков и элементов.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment