JsRenderチュートリアル - 表示する値のエスケープ処理
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
コンバータを使って表示する値をエスケープ処理する
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/jsrender.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // 表示するデータ var text = '<h1>"\'&\'"</h1>'; // テンプレートに名前を付けて登録。 $.templates({ linkTemplate: "#template" }); // 名前付きテンプレート"linkTemplate"に変数textを渡し、 // レンダリング結果を表示 $('#result').html( $.render.linkTemplate(fruits) ); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> {{!-- [\x00`><"'&]にマッチする文字を数値エンティティ、 もしくは名前付きエンティティに置換 --}} <p>{{html:#data}}</p> {{!-- htmlコンバータの省略形 --}} <p>{{>#data}}</p> {{!-- 属性用コンバータ。処理はhtmlコンバータと同等 --}} <p>{{attr:#data}}</p> {{!-- encodeURIによるURLエンコード --}} <p>{{url:#data}}</p> {{!-- コンバータなし --}} <p>{{:#data}}</p> </script> </body> </html>
説明
テンプレートで変数を出力する場合、変数名の前に「>」と書いていますが、これがコンバータと呼ばれるものです。コンバータと変数は「:」で区切ります。このコンバータを使うことで、出力する際のエスケープ処理などを行うことができます。
JsRenderには標準で3つのコンバータが用意されています。
種類 | 記法 | 省略形 | 内容 | 例 |
---|---|---|---|---|
HTMLコンバータ | html | > | [\x00`><"'&]にマッチする文字を数値エンティティ、もしくは名前付きエンティティに置換する。省略形を使用する場合、「:」は不要 | {{>#data}} |
属性コンバータ | attr | [\x00`><"'&]にマッチする文字を数値エンティティ、もしくは名前付きエンティティに置換する | {{attr:#data}} | |
URLコンバータ | url | encodeURIによるURLエンコードを行う | {{url:#data}} | |
コンバータなし | エスケープ処理をしない | {{:#data}} |