Riot.js tips - jade(pug) でタグを定義する際の yield バッティング問題を解決する方法

phi phi on Riot.js

Riot.js には, yield という定義済みのタグに HTML を挿入する便利な機能があります.
ただこの yield というキーワード, 色々な言語で様々な用途として使われていて漏れ無く jade にも同じキーワードで違う機能として定義されちゃっています.

なので Jade でタグ定義する際に yield を使うと, Riot.js ではなく Jade のほうの yield として認識され上手く動きません.

今回はその解決方法を紹介したいと思います.

解決方法

下記のように書き換えるだけです.

yield Text Text Text Text  
↓
#{'yield'} Text Text Text Text

サンプル

ちゃんと yield 部分が展開されているのが分かるかと思います.