Middleman + Marionette.js で eco テンプレートを使うためのセットアップ最短ステップ

前提: Middleman で Marionette.js を使うためのセットアップ最短ステップ が完了していること

• 1. Gemfile に以下を追記

gem 'ejs'
gem 'eco'

• 2. source/javascripts/templates 以下に適当なテンプレートファイルを *.jst.eco というファイル名で作成

# source/javascripts/welcome_view.jst.eco

<p>Hello World</p>

• 3. source/javascripts/all.js に以下を追記

//= require_tree ./templates # require_tree . より先に読み込むこと

//= require_tree .

• 4. source/javascripts/application.js.coffee 的なファイルにいろいろ実装

class WelcomeView extends Marionette.LayoutView

  # JST['...'] というヘルパーは sprockets によって提供される
  # JST['...'] は関数を返す
  # その関数を呼び出すと指定のパスにあるテンプレートの文字列を返す
  # 
  # class WelcomeView extends ... でクラスが定義されるとき
  # JST['...'] も呼び出されるので、この application.js.coffee が
  # 実行されるより先にテンプレートを読み込んでおく必要があった
  template: JST['templates/welcome_view']

App = window.App = new Marionette.Application
App.addRegions
  mainRegion: '.welcome'

App.addInitializer ->
  welcomeView = new WelcomeView
  App.mainRegion.show welcomeView

$ ->
  window.App.start()