暴动每个构建 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 expressions can only render text values without HTML formatting. However you can make a custom tag to do the job.

创建自定义 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>

可以通过使用 virtual 标签和 data-is 组合来摆脱包装 raw 标签：

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

实例：http://plnkr.co/edit/ZQxJNfqvdSvWpMk8z0ej?p=preview

暴动每个构建 html 标签

riot each build html tags

javascript

riot.js