日頃の行い

個人的な日頃の行いをつらつら書いてます\\\\ ٩( 'ω' )و ////

twigテンプレートエンジンでvue.jsを使うとデリミタがコンフリクトする。

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 %}

既に用意されててよかった。。。