Marionett.jsでBackbone.jsを快適にする

はじめに

Backbone.jsを使っていると、特にViewのコードが読みづらくなる、コード量が多くなるといった問題が発生することがある。
この原因として、Backbone.jsが高機能ゆえにどのような書き方でも動くっちゃ動くということがある。
また、ベストプラクティスがあまり浸透していないことも原因だと思う。

Backbone.js

Marionette.jsとは

Marionette.jsはBackbone.jsに便利な機能を追加したフレームワーク。
誤解を恐れずに言えば、Backbone.jsのベストプラクティスを集めて実装できるようにしたものと言えるので、コードがきれいになる。
特にView周りは同じ処理を何回も書いてたものを共通化してくれるのでありがたい。

marionettejs.com

Marionette.jsでできること

いくつかあるが、今回はViewの拡張について紹介する。

Marionette.View

他の3つのViewの基底クラスとなるもの。 Requirejsとの組み合わせの場合、このようになる。

define([
    'jquery',
    'marionette'
], function ($, Marionette) {
    var AppView = Marionette.View.extend({
   });
});

このMarionette.Viewをそのまま書くことはあまりない。

Marionette.ItemView

これは1つのModelやCollectionをViewとして扱う。
後のCollectionViewやCompositeViewを親として複数設定することができる。

Marionette.CollectionView

ViewのCollection版。
ItemViewを子Viewとして管理する。

Marionette.CompositeView

CollectionViewを更に継承している。
特徴としてtemplateが指定できたり再帰的に子供のrenderを設定できる。

また記事は書きたいけどtemplateは便利。うん。