Riot.jsで以下のようにオプションのテキストにhtmlのタグが付いている場合、
tag
<app>
<!-- layout -->
<p>{ opts.message }</p>
<!-- style -->
<style>
body {
color: #444;
font-size: 16px;
}
div {
margin: 20px;
}
#emphasis {
color: blue;
font-weight: bold;
}
</style>
</app>
mount
riot.mount('app', {
message: 'メッセージの<span id="emphasis">この部分</span>が強調'
})
// マウントすると
// メッセージの<span id="emphasis">この部分</span>が強調
// と表示される
そのhtmlタグは評価されずそのまま文言としてそのまま表示されてしまいます。
でも、htmlタグはそれとして評価されてほしい。(上記では、span
タグ)
どうするか考えた結果、innerHTML
でガツンとセットする方法が一番楽。
tag(改良版)
<app>
<!-- layout -->
<p id="message"></p>
<!-- logic -->
<script>
// riotはid属性にthisでアクセスできる
this.message.innerHTML = opts.message
</script>
<!-- style -->
<!-- 先ほどと同じなので省略 -->
</app>
以上、ちょっとした小技でした。 →デモ