Бунтовать каждый тег сборки HTML

Question

Я новичок в Riot.js и у меня проблема с созданием HTML-элементов из объектов. У меня есть такая структура:

var self = this;

self.objects = [
  { tag: "h1", text: "hello" },
  { tag: "h2", text: "world" }
];

И я хочу в браузере получить что-то подобное

<h1>hello</h1>
<h2>world</h2>

это то, что у меня есть

<virtual each={objects}><{ tag }> { text } <&#47;{ tag }></virtual>

и это дает мне

"<h1>hello<h1>"
"<h2>world<h2>"

Как я могу удалить " кавычки? Или как я могу улучшить свой код для отображения на странице реального HTML-тега, а не строки?

Answer 1

http://riotjs.com/guide/

Выражения Riot могут отображать только текстовые значения без форматирования HTML. Однако вы можете сделать собственный тег для выполнения этой работы.

Создать кастом raw тег:

<raw>
  <script>
    this.root.innerHTML = opts.content
  </script>
</raw>

Используйте его для рендеринга HTML:

<raw content="{'<' + tag + '>' + text + '</' + tag + '>'}" each="{ objects }" />

<script>
  this.objects = [
    { tag: 'h1', text: 'hello' },
    { tag: 'h2', text: 'world' }
  ];
</script>

Можно избавиться от упаковки raw пометить с помощью virtual тег & data-is сочетание:

<virtual data-is="raw" content="{'<' + tag + '>' + text + '</' + tag + '>'}" each="{ objects }" />

Пример из жизни: http://plnkr.co/edit/ZQxJNfqvdSvWpMk8z0ej?p=preview