Рома молодец, но как этим пользоваться не понятно.

@tadatuta А ты не собираешь случайно такие штуки где-то в одном месте? Эта штука и с BEM IDE что-то общее имеет, и со сборкой в браузере.

@apsavin песочница полезна, например, тем, кто хочет понять, что это такое и кому лень ставить ноду, клонировать стаб, ставить депенды и разбираться, как это все запустить

@zxqfox пока по большей части в чертогах разума, но мы плавно движемся к тому, чтобы собрать все на https://ru.bem.info/built-with-b

Они даже похожи ;-) https://bem.github.io/bh/

@zxqfox так я форкнул всё, выпилил BH и добавил BEMHTML. Близнецы же ;)

@sbmaxx Почему-то я был уверен, что нет ;-) So naive.

@tadatuta это понятно (сам ведь try-bem-online писал), я в буквальном смысле не понял, как пользоваться этой песочницей. Написал шаблон, дальше что?) Где кнопка, чтобы применить шаблон к данным?

@apsavin Автоматически же должно, ошибки валятся?

@zxqfox нет, ошибки показывались, пока шаблон был не дописан до конца.

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

Вот тут я удалил }

Может у тебя шаблон кривой, и оно все верно собирает?

Нет. У меня поле result вообще не меняется. При любом значении полей Data и Templates. Мне кажется, что-то работает не так) Firefox 36, Mac OS.

Firefox 37.0, Win 7 x64, та же беда, толи тормозит, толи ресурсы грузит, в консоль ошибок не выводит.

После 10 рефрешей получилось запустить, при удалении }:

upd При любом изменении эта ошибка.

Надо бы и bemtree подключать в песочницу

Очень удобно :) Как по мне, то с этого и нужно начинать новичкам для понимания.

П.Н. Ещё бы форматированный html иметь внизу, чтобы было проще ориентироваться при сложных примерах.

@apsavin там должен быть пример при загрузке. а можешь показать скриншот, что у тебя?

@zxqfox посмотрю firefox, возможно bem-xjst с ним не очень дружит. Я, честно говоря, только в yandex.browser проверял.

@sbmaxx https://www.dropbox.com/s/hgpdta3iu3wohpr/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202015-04-08%2010.01.34.png?dl=0

@apsavin а проверь прямо сейчас? я пересобрал. у меня в FF сейчас ок.

@belozyorcev добавил форматирование

Статика не версионируется, поэтому рефреш с чисткой кэша, чтоб наверняка ;)

@sbmaxx теперь все хорошо)

@sbmaxx спасибо за форматирование )

Я мож че не понимаю, что она вообще дает? Разве я не могу описать все тоже самое в bemhtml ?

@Rahnar это страничка, на которой можно попробовать BEMHTML в деле, не устанавливая никаких библиотек и инструментов. удобная в первую очередь для начинающих.

@tadatuta А, вот оно что. Если мне не изменяет память, я кажется видел уже такую штуку у Вас, еще давно. Я помню по крайней мере вот эти два окошка)

@Rahnar про это тоже уже было в треде: эта песочница — брат-близнец песочницы для BH.

({ block: 'button', text: 'Кнопка', content: [
    { elem : 'yolo', mods : { v : 'a' } },
    { elem : 'yolo', mods : { v : 'b' } }
] })

+

block('button').elem('yolo')(
    tag()('i'),
    elemMod('v').tag()('em'),
    elemMod('v', 'a').tag()('a'),
    elemMod('v', 'b').tag()('b')
);

=

<section class="button">
  <em class="button__yolo button__yolo_v_a">
  </em>
  <em class="button__yolo button__yolo_v_b">
  </em>
</section>

@sbmaxx @tadatuta Косяк? ;-)

    elemMatch(function() { return this.ctx.mods.v === 'a'; }).tag()('a'),
    elemMatch(function() { return this.ctx.mods.v === 'b'; }).tag()('b')

Только так работает ;-(

А если так?

{
    block: 'button',
    content: [
        { elem : 'yolo', elemMods : { v : 'a' } },
        { elem : 'yolo', elemMods : { v : 'b' } },
        { elem : 'yolo', elemMods : { vv : 'ab' } }
    ]
}

+

block('button')(
    elem('yolo')(
        tag()('default'),
        elemMod('v', 'a').tag()('a'),
        elemMod('v', 'b').tag()('b'),
        match(this.elemMods && this.elemMods.vv).tag()('vv')
    )
);

Но есть ощущение, что последний предикат можно проще написать :)

С elemMods работает. Это, конечно, видимо оффтоп, но... Хм, т.е. обязательно elemMods? Первый раз слышу ;-) А зачем их отделили от mods? Не может же быть mods и elemMods одновременно. Для миксов есть отдельный массив mix. Да и неочевидно срабатывает .elemMod('v')

Лол, что?

{
    block: 'button',
    content: [
        { elem : 'yolo', elemMods : { v : 'a' } },
        { elem : 'yolo', elemMods : { v : 'b' } },
        { elem : 'yolo', mods : { vv : 'ab' } }
    ]
}

+

block('button')(
    elem('yolo')(
        tag()('default'),
        elemMod('v', 'a').tag()('a'),
        elemMod('v', 'b').tag()('b'),
        elemMod('vv').tag()('vv')
    )
);

=

<div class="button">
  <vv class="button__yolo button__yolo_v_a">
  </vv>
  <vv class="button__yolo button__yolo_v_b">
  </vv>
  <vv class="button__yolo button__yolo_vv_ab">
  </vv>
</div>

Круто ;)