Пример Добавление БЭМ-сущностей для задач вёрстки из руководства по BEMHTML выдает ошибку:

Error: Only literal or function is allowed in template's body
   at Compiler.assert (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:180:9)
   at Compiler.transformTemplates (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:648:8)
   at Array.map (native)
   at Compiler.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:201:41)
   at Object.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/api.js:16:40)
   at Compiler.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/compiler.js:121:35)
   at Compiler.generate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/compiler.js:707:14)
   at Object.generate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/api.js:16:40)
   at require.declare.process (/vagrant/project-stub/node_modules/enb-bemxjst/techs/bem-xjst.js:7:28)
   at /vagrant/project-stub/node_modules/enb-bemxjst/node_modules/sibling/lib/runner.js:22:48

Гугление подсказало обернуть матчинг флага в анонимную функцию:

block('box').match(function() { return !this.ctx._processed; })

Не помогло.

Обернул вызов applyCtx:

block('box').match(function() { return !this.ctx._processed; }).content()(function() {
    applyCtx({'ctx._processed':true}, {
        elem: 'left-top',
        content: {
            elem: 'right-top',
            content: {
                elem: 'right-bottom',
                content: {
                    elem: 'left-bottom',
                    content: applyNext()
                }
            }
        }
    });
})

Ошибка пропала, но html сгенерировался криво:

<div class="box">
    <div class="box">text</div>
    <div class="box__left-top">
        <div class="box__right-top">
            <div class="box__right-bottom">
                <div class="box__left-bottom"></div>
            </div>
        </div>
    </div>
</div>

Подскажите, как правильно делать такую банальную вещь?

Здравствуйте, подскажите пожалуйста по следующией конструкции bemhtml. Элементу item, из условия необходимо добавить произвольный класс. Но не могу понять доступную конструкцию обрабатываемого элемента. Вызывается ошибка "TypeError: string is not a function" Пробовал item.cls()('my-class') и item.ctx.cls()('my-class') и this.. Но кажется что-то я совсем не то делаю.

this.ctx.items.forEach(function(item){
                var sub = [],
                num = 0;

  if(item.items != null){            
     item.cls()('my-class');
     item.items.forEach(function(subItem, i){
          sub.push({
             elem: 'sub-item',
             content: {
            elem: 'link',
            url: subItem.url,
            content: [subItem.text]
          }
       });
      });
  }
...
})

Всем привет!

Как настроить IDE для корректной работы с форматом *.bemhtml, как например в этом видео?

Устанавливал плагин BEM Support, но он не работает. Видимо потому, что поддерживает старый синтаксис.

Добрый вечер , есть код такого плана, где у меня map бегает по массиву (objects), считает кол-во объектов в этом массиве и потом выводит то , что внутри функции с аргументом item. Соотвественно , чтобы вывести 20 таких элементов item(objects__item) на cтраницу , нужно 20 объектов внутри массива.Как можно вывести 20шт одинакового содержания item, при помощи цикла? Я просто не пойму куда его применить можно. Пытался обернуть return for-ом внутри map , но это не помогло. Это нужно для того, чтобы не копипастить в bemjson аж целых 20 объектов, они нужны чисто для заглушки. Или это лучше как то через bemhtml делать?

   {
     block: 'objects',
     content: [
               {
                     preview: '../../img/objects/1.jpg',
                     title: 'Антена штатная',
                     company: 'Эльбрус-запчасти',
                     url:'/',
                     address: 'Французская наб.,24',
                     date: '21:30',
                     prise: '2 120',
           }

     ].map(function(item) {
        return{
            elem: 'item',
           content: [ ...... ]
        }
    }
}

Очень удобно в bemhtml делается mix элемента на дочернем блоке:

block('block').elem('logo').def()(function(){
    return applyCtx(
      this.extend(this.ctx.content, {
        mix: { block: this.ctx.block, elem: this.ctx.elem, mods: this.ctx.mods }
      })
    );
  })

Подумалось, что неплохо бы видеть шорткат для такой конструкции в базовых шаблонах или шаблонах проекта. Кто-нидудь уже делал подобный шорткат для bemtree / bemhtml?

Написал такое:

var title = 'my long title';
block('page').elem('title').content()(function(){ return title });
block('kg-appbar').elem('title').content()(function(){ return title });

Не сработало, т.к. переменная и шаблоны разъехались в разные области видимости после компиляции. Есть решение или мне не стоит такого хотеть?

Я хочу предоставлять компоненты написанные на БЭМ для проектов, которые больше нигде БЭМ не используют. При этом я хочу предоставить им возможность до-/пере- определять шаблоны компонентов. В bh это реализуется приблизительно следующим образом:

modules.require(['bh'], function(bh){
  bh.match(/* определение шаблона */)
});

Как такого же эффекта можно достичь с шаблонами bemtree / bemhtml?

Предположим приходит json с массивом объектов. Задача смапить его и распихивать по ячейкам таблицы. Как это сделать с BEMJSON и BEMHTML?

В каком файле делать мап? Какой алогитм действий? Допустим если мне совершенно не нужна бэм структура, я не буду стилизовать таблицу. Просто b-table, как блок, а внутри элементы тегами (thead, tbody, tr, th, td).

Подскажите пожалуйста в чем концептуальная разница по сабжу? И по каким причинам конструкция в bemhtml: block('content').mix()({block: 'grid'}) добавляет к блоку класс, но не формирует стили. А в bemjson: {block : 'content', mix: {block: 'grid'}, добавляет и класс и стили.

Здравствуйте. Пример из руководства:

block('switch')(
...
     content()([
     {
        elem: 'input',
        name: this.ctx.name
     },
...

вызывает ошибку:

Error: Only literal or function is allowed in template's body content()([ ^

из-за применения объекта this. Нашел упоминания проблемы связанные с переходом на новую версию bem-core, разным режимом проекта development и production. Но в итоге причина не ясна. Подскажите пожалуйста, как пройти этап руководства дальше, применив объект в блоке bemhtml.

Что-то я не понял как запустить обработку bemtree, а точнее в каком месте...

Я хочу из bemjson перейти на bemtree - что для этого нужно (как и где вызывать шаблоны bemtree)?

bemtree в bemjson можно вызывать? Я так понимаю, что должно быть что-то типо этого

content: (function() { BEMTREE.apply('blockName'); } )()

Всем привет :)

Я вот не совсем понимаю назначение bemtree... Для меня он выглядит некой лишней прослойкой (возможно я его не до конца понимаю).

BEM дерево у нас ведь могут генерировать и BH и BEMHTML. Зачем использовать для этого ещё и bemtree? Или его можно не использовать?

П.Н. Я где-то встречал уже подобный вопрос, но пробежав по тегам на форуме - ничего не нашёл...

При написании проекта с нуля на bem-stub - структура делается по bemjson.

А как править структуру в bem-forum?

Ребят, делаю сайт , а у меня блок footer и меню одинаковые на всех страницах , вместе с контентом. Как - то можно вынести их в папку и из этой папки, подключать всем страницам , чтобы не копипастить в каждую страницу ?

Здравствуйте. Начал знакомство с БЭМ-инструментами, до этого использовал только методологию наименования классов. На данный момент хочу использовать бэм-инструменты для верстки однотипных шаблонов. Но у меня возникли проблемы с добавлением новых своих сущностей (а не блоков яндекса из bem-core и bem-components) в common.blocks, внятной документации не нашел. Использую enb-bem + bwmsjon + bemhtml. Также хотелось бы узнать, как отключить минификацию файлов html при сборке. Сейчас весь html склеивается в одну строку, а хотелось бы получать файл, пригодный для дальнейшей интеграции на cms.

Всем привет! Подскажите, где посмотреть пример серверной шаблонизации? Чтоб одни и те же блоки можно было рендерить и на сервере и на клиенте.

Всем привет!

А поделитесь кто может опытом отлавливания ошибок при исполнении BEMTREE и BEMHTML. BEMTREE мы исполняем в vm и передаем туда контекст. Так вот если там внутри vm случается фейл я не могу понять где. Это, конечно, сильно развивает мышление, но хочется иногда просто увидеть ошибку в консоль:)

Спасибо форуму, сборка происходит нормально. Но результатов BEMHTML на клиенте пока нет.

В JavaScript код такой:

        var reposBEMJSON = this.repos.map(function(repo) {

            return {
                block: 'test',
                //elem: 'repo',
                content: '1111',
                info: {
                    name: repo.name,
                    url: repo.html_url
                }
            }
        });

        var html = BEMHTML.apply(reposBEMJSON)
        console.log(html);

https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.js#L49

Зависимости по технологиям указываю: https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.deps.js#L12

Судя по коду index.min.js шаблон всё-таки включен в сборку:

if(!__$ctx.elem&&__$ctx.block==="test"&&__$ctx._mode==="content"){__$ctx.__$a=0;return"XXXX"}

Но в консоль выводится undefined. В браузер приезжает свежий, незакешированной index.min.js — я проверила.

В чём может быть проблема и как дебажить дальше?

Привет!

Захотелось пользоваться BEMHTML шаблонами на клиенте, но получается ошибка can't resolve dependence "BEMHTML". Вот как объявляется зависимость https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.js В deps вроде тоже всё прописано https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.deps.js

Делаю по образу и подобию bem-components, но библиотеки у меня старые (https://github.com/varya/varya.github.com/blob/features/github-repos/bower.json). Обновляться не хочу, боюсь, что это принесет ещё больше проблем. Сборка на ENB https://github.com/varya/varya.github.com/blob/features/github-repos/.bem/enb-make.js

Как мне заставить мой bemhtml работать в браузере?

Добрый день.

:)

А что нужно для того, чтобы вместо bemhtml использовать bh ?

П.Н. bh мне показался более наглядным и привычным, в сравнении с bemhtml. Вдобавок ко всему он ещё и быстрее.

Нужно из шаблона пробросить свойство которое будет проверяться как предикат в другом шаблоне. Сделал что-то типа:

block input, elem samples, elemMod theme 'ordered-list' {
    tag: 'ol',

    default: {
        applyNext();
        this.orderedlistSample = true;
        return this.orderedlistSample
    }
}

Второй шаблон:

block input, elem sample, this.orderedlistSample {
    tag: 'li'
}

К сожалению так не работает :( Как можно решить эту задачу?

Сейчас в основном, все что касается html (тэги, атрибуты) я обрабатываю в bemhtml, остальное в bemtree. А если мне понадобятся эти же преобразования на клиенте, то их надо будет перенести в bemhtml или возможно шаблоны bemtree по депсам включить в собираемый js? Или все же bemtree это чисто серверная технология?

К примеру одно из обычных преобразований:

block('custom-menu').elem('item')
(
    def()(function () {
        var ctx = this.ctx;

        return applyCtx({
            block : 'link',
            url   : ctx.url
            mix   : {
                block: this.block,
                elem:  this.elem
            }
            content : ctx.content
        })
    })
)

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

Есть шаблон который переопределяет тег:

block input, elem samples, elemMod logins yes{
    tag: 'ol',
}

нужно так же что бы он удалял wai-атрибут role, определенный в другом шаблоне. Как этого добиться? Использовать apply()?

Какая разница между этими технологиями?

Есть ли пример как организовать приложение с использованием шаблонизаторов bemhtml или bh с bemhistory на клиенте? Цель реализовать проект одностраничного приложения польность по БЭМ методологии и с использование минимального количества внешних библиотек.

Как правильно составить условие в bemtree для блока, чтобы он не выводился при определенных условиях

Например у меня есть блок block-a и я хочу чтобы он вообще не появился в результирующем bemtree, если в нем this.ctx.data не определено. У меня получился следующий рабочий вариант:

block('block-a')
(
    match(this.ctx.data)
    (
        content()
        (
            function ()
            {
                var ctx = this.ctx;
                var result;

                // Some code ....

                return result;
            }
        )
    ),

    match(this.ctx.block && !this.ctx.data && !this.ctx.content) // @todo !!!
    (
        function ()
        {
            this.block = undefined;
            this.ctx = {};

            return applyNext();
        }
    )
);

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

Буду рад любой подсказке, заранее спасибо!

Вижу на странице:

TypeError: Cannot read property '0' of undefined
    at __$b29.iterateItems__$69 (.../users-list.bemhtml.js:501:46)
    at __$b29.iterateItems__$69 (.../users-list.bemhtml.js:509:21)
    at __$b29 (.../users-list.bemhtml.js:513:9)
    at __$g2 (.../users-list.bemhtml.js:1028:24)
    at applyc (.../users-list.bemhtml.js:33:20)
    at __$b75 (.../users-list.bemhtml.js:809:5)
    at applyc (.../users-list.bemhtml.js:105:20)
    at __$lb__$160 (.../users-list.bemhtml.js:784:22)
    at __$b74 (.../users-list.bemhtml.js:787:7)
    at applyc (.../users-list.bemhtml.js:102:24)

Реально ли собирать sourcemaps и при таких выбросах резолвить файлы/строки вменяемо?

Доброго времени суток комрады. Столкнулся с необходимостью использовать конструкции сабжа, из доки, ничего не понял. Сделал вывод что для понимания нужно знать как это работает в XSL. Но с XSL'ом не работал, кто нибудь может объяснить как эти конструкции работают более подробно и в чем разница между ними? Было бы очень круто если на примерах.

А суть моей проблемы в том, что один шаблон должен помимо своей основной сущности, так же выводить результаты еще 1 шаблона при условии что у его родителя есть элемент этого шаблона.

По просьбе в твиттере от @life_maniac.

Те, кто используют наши шаблонизаторы BEMHTML или BH для верстки статики, часто спрашивают, как отключить минимизацию получаемого HTML.

Но не многие знают, что на самом деле никакой минимизации не происходит.

Почему? Потому что шаблонизаторы изначально генерируют из BEMJSON оптимальный для продакшена HTML.

Если вам необходимо получать красиво отформатированный HTML, подойдет любой pritty-print, например, js-beautify.

Его можно звать через CLI (js-beautify --html) либо встроить прямо в технологию сборки через JS API.

Приведу примеры такой технологии для bem-tools и ENB (технология написана исходя из предположения, что вы используете project-stub).

bem-tools

var BEM = require('bem'),
    Q = BEM.require('q'),
    environ = require('bem-environ'),
    join = require('path').join,
    BEMBL_TECHS = environ.getLibPath('bem-bl', 'blocks-common/i-bem/bem/techs'),

    beautify = require('js-beautify').html;

exports.baseTechPath = join(BEMBL_TECHS, 'html.js');

exports.techMixin = {
    getCreateResult: function(path, suffix, vars) {
        // не вызывать js-beautify в production-режиме
        if (process.env.YENV === 'production') return this.__base.apply(this, arguments);

        return this.__base.apply(this, arguments)
            .then(function(html) {
                return beautify(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });
            });
    }
};

ENB

Для ENB приводить полный листинг не буду. Все сводится к полному копипасту html-from-bemjson.js с добавлением вызова бьютифаера на 40 строке:

var html = bemhtml.BEMHTML.apply(json);

return process.env.YENV === 'production' ? html : require('js-beautify').html(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });

Использование

Когда технологии готовы, останется лишь заменить путь к технологии в конфиге сборки:

• здесь для bem-tools
• и здесь для ENB.

PS: Не забываем установить сам модуль: npm i js-beautify --save.

Приветствую! Вопрос, возможно, глупый, но все же хотелось бы узнать мнение людей, которые не такие "зеленые" в этом деле как я. Маленькая предистория: вдохновившись записями мастер-класса BEMup'a в Москве я принялся за дело - сайт получает данные из БД, они обрабатываются в BEMTREE, полученный bemjson в BEMHTML, а оттуда на клиент. Роутингом всего этого занимается express. Все отлично и прекрасно, но есть одно "но". Дело в том, что на всех страницах (точнее сказать по всем адресам, которые знает мое приложение) есть одинаковый контент в виде менюшки, лого и т. д. Так вот хотелось бы всю вот эту, так сказать, "статику" один раз описать в файле *.bemjson и забыть. Очень уж лениво каждый раз после обработки БЕМ-деревом оборачивать полученный bemjson своими блоками, да и если это ajax-запрос, то при таком подходе результат выходит мягко говоря забавный. Думаю, многие сталкивались с подобным, потому буду рад Вашему совету