BB: Deferreds in parent view

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/x-handlebars-template" class="tmpl-example">
	<div class="panel js-panel"></div>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

div {
    width: 500px;
    height: 500px;
    background: white;
}

.panel {
    background: cyan;
    transition: height 1s;
    height: 100px;
    
    &.animate {
        height: 300px;
    }
}

JavaScript

console.clear();

var ParentView = Backbone.View.extend({
	
    template: Handlebars.compile( $('.tmpl-example').html() ),
    
    initialize: function() {
    	
    },
    
    render: function() {
    	this.$el.html( this.template() );
        	
        _.defer(function() {
	        this.afterRender();
        }.bind(this));
        
        return this;
    },
    
    afterRender: function() {
    	this.deferred = $.Deferred();
        
        this.$('.js-panel').addClass('animate');
        
        this.$('.js-panel').on('transitionend', function() {
        	this.deferred.resolve();
        }.bind(this));
        
        
    }
});

var ChildView = ParentView.extend({
	initialize: function() {    
		$.when(this.deferred).done(function() {
        	console.log('now go do something???');
        });
    }
});

var view = new ChildView();

$('body').html(view.render().el);