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标记＆amp;放弃包裹virtual标记。 data-is组合：

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

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

每个构建html标签的骚乱

1 个答案: