javascript - 骚乱每个构建 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/#render-unescaped-html

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