8/18学んだこと / Backbone.js × Rails ( HAML )

Backbone.js

昨日の問題（Backboneのテンプレートをぶち込んだerbをHAML化するとうまくいかない）に引き続きトライした。

テンプレートを.hamlでなく、jstとして分離してやることであっさり解決した。

まず、app/assets/javascripts/backbone/templatesディレクトリにitem-template.jst.ejsを作り、<script type="text/template">として読み込んでいた以下のテンプレートをコピーする。.haml内の記述は当然削除する。

<div class="view">
  <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
  <label><%- title %></label>
  <a class="destroy"></a>
</div>
<input class="edit" type="text" value="<%- title %>" />

次に、js内でBackbone.Viewをextendsしたクラスのtemplateを以下のように書き換える。

  class TodoView extends Backbone.View

#   template: _.template($('#item-template').html())
    template: JST['backbone/templates/item-template']

templateの記述がerbと競合するからという理由で設定していたunderscore.jsのtemplateSettings（以下）は削除する。

  _.templateSettings =
    interpolate: /\{\{(.+?)\}\}/g,
    evaluate: /\{%(.+?)%\}/g,
    escape: /\{%-(.+?)%\}/g

これでテンプレートの分離は完了。分離したほうが設計としても美しい気がする。

syntax errorになっていたHAMLもこれで解決したので一旦commit＆pushしておいた。