JsRender Tips

categories: develop, javascript

jQuery Templates のメンテナンスが止まっている今、Next-generation jQuery Templates(まだ正式リリース版でないのでNg)と呼ばれているクライアントサイドのテンプレートエンジン JsRender を使うときの Tips というかハマった点

キーワードに class を使っちゃダメ

Safari, Chrome, Firefox, Opera, IE9 などのモダンブラウザだと大丈夫だけど、IE8 だと動かない
そもそも class は JavaScript の予約語だから使わない方がいいね

<script id="myTemplate" type="text/x-jsrender">
  <div>{{:class}}</div>
</script>

else if は使っちゃダメ

これもモダンブラウザでは大丈夫だけど、IE8 だと動かない
代わりに「else 条件式」の形式が使えてるので、こっち方が短いしオススメ

<script id="myTemplate" type="text/x-jsrender">
  {{if state === 1}}
  <div>A</div>
  {{else if state === 2}}
  <div>B</div>
  {{else}}
  <div>C</div>
  {{/if}}
</script>
<script id="myTemplate" type="text/x-jsrender">
  {{if state === 1}}
  <div>A</div>
  {{else state === 2}}
  <div>B</div>
  {{else}}
  <div>C</div>
  {{/if}}
</script>

tags: ,

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL