CODEWITHSUNDEEP
backbone.jsrequirejs
Jürgen Paul
Jürgen Paul

Reputation: 14997

Animating between views

On each of my views I have this on each of my render methods:

render: function(){
    template = _.template(ViewTemplate, {foo:get});
    wrapper = this.$el;
    wrapper.is(':hidden') ? 
    wrapper.html(template).show(200) : 
    wrapper.hide(200, function(){ wrapper.html(template).show(200) });
}

But this is so repetitive, I was wondering how could I be implement animation between my views but not repeating the same lines of code?

Upvotes: 2

Views: 2287

Answers (1)

McGarnagle
McGarnagle

Reputation: 102743

Maybe just add the fade-in as a utility method to the View prototype:

Backbone.View.prototype.fadeIn = function(template, wrapper) {
    wrapper.is(':hidden') ? 
    wrapper.html(template).show(200) : 
    wrapper.hide(200, function(){ wrapper.html(template).show(200) });
};

That reduces the repetition in the render implementations:

render: function() {
    template = _.template(ViewTemplate, {foo:get});
    this.fadeIn(template, this.$el);
}

Upvotes: 5

Related Questions