Marionette용 LazyItemView

gistfile1.js

        // View 생성 시점에 Model/Collection을 fetch하는 경우, 로딩이 완료된 후에 화면을 표시해야 한다.
        // LazyItemView는 Model 로딩이 완료되기 전까지 options에 설정된 emptyView를 표시한다. 
        // 이를 상속한 View는 Model 로딩이 완료되면 lazyLoadingCompleted를 호출한다.
	App.LazyItemView = Marionette.ItemView.extend({
		constructor : function() {
			_.bindAll(this, 'lazyLoadingCompleted');
			Marionette.ItemView.prototype.constructor.apply(this, arguments);
		},
		
		render : function () {
			this.rendered_ = true;

			this.closeEmptyView();
			
			if (!this.lazyLoadingComplete_) {
				this.showEmptyView();
			} else {
				Marionette.ItemView.prototype.render.apply(this, arguments);
			}
		},
		
		lazyLoadingCompleted : function(model, resp) {
			console.log('lazyLoadingCompleted', resp);
			this.lazyLoadingComplete_ = true;
			this.trigger('item:loaded');
			if (this.rendered_) {
				this.render();
			}
		},
		
		showEmptyView : function() {
			var emptyView = this.options.emptyView;
			if (emptyView && !this.emptyView_) {
				var model = new Backbone.Model();
				this.emptyView_ = new emptyView({model : model});
				this.emptyView_.render();
				this.$el.append(this.emptyView_.el);
			}
		},
		
		closeEmptyView : function() {
			if (this.emptyView_) {
				this.emptyView_.close();
				delete this.emptyView_;
			}
		}
	});

	// Usage
	var XyzView = App.LazyItemView.extend({
		template : '#xyz-tpl',
		
		initialize : function() {
			this.model = new App.XyzModel({ id : this.options.id});
			this.model.fetch({
				success : this.lazyLoadingCompleted
			});
		},
                ...
        });