Backboneで作ったSPAをMarionette化してみた

モデルもコレクションも使わないビュー

ってあると思うんですけど。
でもデータはなんかしらあって、それを表示したい。
そんな場合に、どうやってデータをテンプレに渡すか。

こういうHTMLで、

<div id="my-region"></div>
<script id="my-view" type="x-my-tmpl">
  myVar: <%= myVar %>
</script>

こういうjs書けば良さそう。

var App = new Marionette.Application();

// ...

var View = Marionette.ItemView.extend({
  template: '#my-view',
  // serializeDataをオーバーライドして、データをcompileに渡す
  serializeData: function() {
    var data = { myVar: 'hoge' };
    return data;
  }

  // もしくは、templateをオーバーライドして固定のテンプレを返しちゃう
  /*
  template: function () {
    var $tmpl = $('#my-view').html();
    var data = { myVar: 'hoge' };
    return _.template($tmpl, data);
  }
  */
});

// ...

App.addRegions({
  myRegion: '#my-region'
});
App.myRegion.show(new View());

// ...
var View = Marionette.View.extend({
  template: $('#my-view').html(),
  render: function() {
    var tmpl = _.template(this.template);
    var data = { myVar: 'hoge' };
    this.$el.html(this.template, data);
    return this;
  }
});
// ...

JST使いたい

これは一応公式にも記載がありました。

参考：Using jst templates with marionette · marionettejs/backbone.marionette Wiki

こんなコードで、Backbone.Marionette.Renderer.render を上書きすれば良いとのこと。

// Backbone.Marionette.Renderer.renderをオーバーライド
Backbone.Marionette.Renderer.render = function(template, data){
  if (!JST[template]) throw "Template '" + template + "' not found!";
  return JST[template](data);
}

あとはビューのtemplateで、なんてテンプレ名かを文字列で渡すだけでOK。
※先述のモデルもコレクションも使わないテンプレでJST使いたい場合は、selializeDataを上書きするパターンしか使えません。

とはいえどっかでJST読みこめば、もうグローバルに触れるので、なんとでもなるわなーって気もする。