[Backbone.js]Marionette.CollectionViewの中身が空の時のデフォルトのビューを表示する

リファレンスにやり方書いてあった。
オプション万歳。

どっぷりとMarionette.jsの便利さに浸かっていますが、まだまだ練度が不足しているところ。

先日困ったのは、Marionette.CollectionViewが保持するコレクションが空の状態の時の出力処理。

空なので何も出力されないような状態になっていたのですが、「空の時は専用のメッセージを出してほしい」という修正依頼。

Marionette.jsのレンダリングフローを崩したくなかったのでMarionette.CollectionViewのrender()メソッドをオーバーライドする案は却下。

レンダリング完了時にコールバックを実行できるフックポイントがあるのは知っていたので、そこで保持しているコレクションの数をチェックして、空の場合は特別なレンダリング処理を行えば解決できるであろう。

ただし、特別なレンダリング処理をどーやって実装するべきかが悩みどころ。
空の時専用のrender()メソッドは絶対に必要になるし、そのメソッド専用にDOMを構築する機構も必要になる。

これってもう空の時専用のクラス作るのと同じ。

なので、空の時専用のクラスを作って、コールバック実行時にインスタンス作って、コレクションビューのDOMを構築したりとか。

で、なんだかなーと思ってリファレンスを眺めていたら、emptyViewというプロパティを発見。
よーく見てみると、自前でコールバックでやっていたことを自動でやってくれるプロパティらしい。

<script type="text/template" id="childTemplate">
    <a href="#"><span><%- name %></span></a>
</script>

<script type="text/template" id="emptyTemplate">
    <span>リストが登録されていません</span>
</script>

こんな風にテンプレートを二つ用意し、

App = new Marionette.Application()

App.addRegions
    mainRegion: '#main'

childView = Marionette.ItemView.extend
    talName: 'li'
    template: '#childTemplate'

emptyView = Marionette.ItemView.extend
    talName: 'li'
    template: '#emptyTemplate'

listCollectionView = Marionette.CollectionView.extend
    tagName: 'ul'
    childView: childView
    emptyView: emptyView


list = new listCollectionView()

App.mainRegion.show list

Marionette.ItemViewを継承したクラスも2つ用意し、Marionette.CollectionViewを継承したクラスのプロパティを設定すればOK。

これでリストを保持しているときと空の時でクラスを切り替えてレンダリングを行うことができる。

有能。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です