Amplie sua visualização do backbone com alguns métodos úteis

Estou trabalhando com Backbone.js há alguns meses e, depois de criar vários modos de exibição diferentes, você percebe que está escrevendo a mesma funcionalidade indefinidamente.

Para evitar isso, você pode simplesmente estender sua Visualização do Backbone com esses métodos e chamá-los mais tarde. Aqui estão alguns dos que eu uso:

Renderiza apenas uma parte do modelo

Backbone.View.prototype.renderElement = function (selector, data) {
    var html = $('<div>').html(this.template(_.extend({}, this.model.toJSON(), data)));
    this.$el.find(selector).replaceWith($(selector, html));
    return this;
}

Role para um elemento

Backbone.View.prototype.scrollToElement = function (selector, time, verticalOffset) {
    var time = typeof(time) != 'undefined' ? time : 200,
        verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0,
        element = $(selector),
        offset = element.offset(),
        offsetTop = offset.top + verticalOffset;

    $('html, body').animate({ scrollTop: offsetTop }, time);
}

Exibir uma sobreposição de carregamento no topo da visualização

Backbone.View.prototype.renderLoading = function(){
    var loadingHtml = '<div class="loading">'
    + '<div class="loading-overlay"></div>'
    + '<div class="loading-icon"></div>'
    + '</div>';

    this.$el.append(loadingHtml);
}

E este é um exemplo de como usá-los:

var PageView = Backbone.View.extend({

    initialize: function(options){
        this.model.on({
            'request': this.renderLoading,
            'sync': this.updateElement
        }, this);
    },

    updateElement: function(){
        this.renderElement('.element');
        this.scrollToElement('.element');
    }

    // some methods to do stuff with the model
});