Chaplin.jsでtemplete機能を拡張する方法

ちょっとマイナーで需要があるのか分かりませんが、仕事でChaplin.jsを使っているのでTIPS的な記事をコツコツ書いていければいいなと思います。

ということで、Chaplin.jsのViewクラスでtemplateプロパティにテンプレートそのものを渡すのではなくて、以下のようにscriptタグで囲われたテンプレートのidを渡せるようにしてみました。

<script type="text/x-handlebars-template" id='hoge_template'>
  <h1> Hello world </h1>
</script>

getTemplateFunctionを以下のように拡張します。

define [
  'chaplin'
], (Chaplin) ->
  'use strict'

  class View extends Chaplin.View

    initialize: ->
      super

    getTemplateFunction: ->

      # Template compilation
      # --------------------

      template = @template
      if typeof template is 'string'
        templateFunc = Handlebars.compile $(template).html()
        @constructor::template = templateFunc
      else
        templateFunc = template
      templateFunc

上で作成したViewをextendして以下のように使用します。

define [
  'chaplin'
  'base/views/view'
], (Chaplin, View) ->
  'use strict'

  class HogeView extends View
    autoRender: yes
    container: '#container'
    id: 'hoge'
    template: '#hoge_template'

    initialize: ->
      super

    render: ->
      super

これでidを渡すだけで済むようになります。