silex+twigでvue.jsを使ってみようと思ったら
'{{ message }}' がtwigのdelimiterとして認識されてしまってエラーになった。
twigとは
Homepage - Twig - The flexible, fast, and secure PHP template engine
エラー内容
Twig_Error_Runtime: Variable "message" does not exist in "index.twig" at line 6
とりあえずソースコードを見てみると
index.twig
{% extends 'base.twig' %} {% block body %} <h1>messageを入力</h1> <input type="text" v-model='message' /> <input type="button" value='送信' v-on='click: addMessage'> {{message}} <!-- ここがtwigの文法として評価されてしまっている --> <ul> <li v-repeat="messages" v-transition> {{content}} </li> </ul> {% endblock %}
base.twig
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/css/common.css"> <script src='/components/vue/dist/vue.js'></script> <title>hoge</title> </head> <body> <div id="demo"> {% block body %} {% endblock %} </div> <script src='/js/common.js'></script> </body> </html>
どうしよう。。。って思って、
twig angularjs delimiter
とか
twig delimiter
とかでググったら以下のURLが見つかりました。
AngularJS-Twig conflict with double curly braces - Stack Overflow
How to escape Twig delimiters in a Twig template? - Stack Overflow
twig側に{% raw %} {% endraw %}とかがあるんですね!
index.twig (修正後)
{% extends 'base.twig' %} {% block body %} <h1>messageを入力</h1> <input type="text" v-model='message' /> <input type="button" value='送信' v-on='click: addMessage'> {% raw %} <!-- ここと --> {{message}} <ul> <li v-repeat="messages" v-transition> {{content}} </li> </ul> {% endraw %} <!-- ここ --> {% endblock %}
既に用意されててよかった。。。