2016-05-11 3 views
0

Riot.jsが新しく、オブジェクトからhtml要素を構築する際に問題があります。私はこのような構造を持っている:riot各ビルド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タグに表示するようにコードを改善するにはどうすればよいですか?

答えて

1

http://riotjs.com/guide/#render-unescaped-html

暴動式はのみHTMLフォーマットなしでテキスト値をレンダリングすることができます。しかし、カスタムタグを作って仕事をすることができます。

カスタムrawタグを作成します。virtualタグ& data-is組み合わせを使用することによって包むrawタグを取り除くことが可能である

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

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

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

がHTMLをレンダリングするためにそれを使用することを:

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

ライブ例:http://plnkr.co/edit/ZQxJNfqvdSvWpMk8z0ej?p=preview