Riot 每个构建 HTML 标记

riot each build html tags

本文关键字：HTML 标记 构建 Riot      更新时间：2023-09-26

我是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 标记，而不是字符串？

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>

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

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

现场示例：http://plnkr.co/edit/ZQxJNfqvdSvWpMk8z0ej?p=preview

相关文章：