サーバー側で初期状態をページに埋め込んで生成しつつ、実行時に変更する部分はブラウザ側で生成したい。
サーバー側はRevel、ブラウザ側ではVue.jsのテンプレート機構を利用しようとしたが、ここで問題があった。Revel(というかGo template)もVue.jsもmustacheベースでタグのマークアップが同一の{{keyword}}(double braces = double mustache )で囲む構文のため、先に処理するRevelが全部奪ってしまう。
Revel側を追ってみるとデリミタの文字列が変更できたので、revel側のテンプレート記号は後に残すべきマークアップを残せるよう、衝突しないが似たような構文として同じ中括弧記号をもう1文字増やした {{{keyword}}} に変更することで切り抜けてみた。
conf/app.conf
template.delimiters="{{{ }}}"
この中括弧3( *triple mustache )はmustache仕様ではエスケープしない生のHTMLを出すということになっているが、
Vue.js側では v-html属性も使えるし、生のHTMLは危険性を意識して使うべきものなので簡単な記法は無くても良いかな、と。
しかしこのように変更するとIntelliJ IDEAで編集するときにエラー表示だらけになるのが少し不便だなー。