続: CollectionViewで初回はemptyViewを表示しない

前のやつは、あまりよくない方法だなぁとは思っていたのですが、ちゃんとしたやり方っぽいのがあった。

"collection:rendered" triggerにフックすればよいようだ。Marionetteだと、triggerMethodというのがあって、triggerでも対応できるし、OnCamelCaseみたいなメソッドが生えていたらそれを自動で呼びだしてくれる。

var YourEmptyView = Marionette.ItemView.extend({
});
var  YourCollectionView = Marionette.CollectionView.extend({
    onCollectionRendered: function() {
        this.options.emptyView = YourEmptyView;
    }
});

CompositeViewだと、onCompositeRenderedになる。

fadeInアニメーションさせたいときとかも、初回はアニメーションさせたくないけど、動的に追加したタイミングではアニメーションさせたいので、このトリガ内で、

var  YourCollectionView = Marionette.CollectionView.extend({
    onCollectionRendered: function() {
        this.OnBeforeItemAdded = function(view) {
           view.$el.fadeIn('fast');
        };
    }
});

みたいにすると、良い感じ。

CollectionViewで初回はemptyViewを表示しない

あんまりよいやり方じゃないので、http://walf443.hatenablog.com/entry/2014/07/10/120223 を参照してください。

Marionette.jsのCollectionViewのemptyView機能は、collectionが0個になったら勝手に「データがありません」などの表示をしてくれて便利なのだけど、初回だけデータのロード待ちなどの関係で、emptyViewを表示したくない、ということが個人的には多いように思える。

そういうときは、showCollectionメソッドを上書きして、showCollectionが呼ばれたら初めて、options.emptyViewにemptyViewの設定が入るようにすればよい。

var YourEmptyView = Marionette.ItemView.extend({
});
var  YourCollectionView = Marionette.CollectionView.extend({
    showCollection: function() {
        this.options.emptyView = YourEmptyView;
        return Marionette.CollectionView.prototype.showCollection.apply(this, arguments);
    }
});

一度でもコンテンツが追加されたら、showCollectionが呼ばれることになるので、それ以降にデータがなくなったりすると、emptyViewを表示してくれるようになる、というわけ。