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

3114 ワード
Marionette.js middleman middleman テキストリンク

前提: 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()