Оптимизируем работу с шаблонами в Backbone

Знакомство с javascript-фреймворком Backbone я, как и многие, начинал с todo-туториала, на базе которого строилось дальнейшее использование фреймворка в своих проектах.

Но туториалы заканчиваются, и начинаются рабочие будни.


Думаю, многим знаком такой участок кода (из вышеупомянутого туториала):

window.AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#todoapp"),

    // Our template for the line of statistics at the bottom of the app.
    statsTemplate: _.template($('#stats-template').html()),
 
    ...

Давайте разберемся подробнее:

• декларацию вида AppView необходимо производить после готовности DOM-дерева, то есть оборачивать в jQuery(function() {...}), что не всегда удобно.
• шаблон statsTemplate подгружается на этапе декларации вида, чтобы экземпляры могли использовать его без дополнительной загрузки и обработки
• шаблон находится внизу html-страницы и подгружается в DOM при загрузке страницы

Конечно, для небольших приложений вопросов нет. А если приложение большое и содержит десятки шаблонов?
Зачем загружать и инициализировать все шаблоны сразу? Нам может и не понадобиться большинство из них.

Загрузка шаблонов

Хорошо бы подгружать шаблоны только тогда, когда они нам нужны и кешировать их.

Исходя из этого, напишем загрузчик:

    Core.Template = {
        cache: {}, // здесь хранятся загруженные шаблоны
        pending: {}, // очередь callback-ов, которые необходимо вызвать после загрузки шаблона
        load: function(url, callback) {
            callback = callback || function() {};

            if (this.cache[url]) { //если шаблон уже загружен, просто вызовем callback
                callback(this.cache[url]);
                return;
            }

            // добавляем callback в очередь
            if (this.pending[url]) { 
                this.pending[url].push(callback);
                return;
            }

            this.pending[url] = [callback];

            jQuery.ajax({ //загружаем шаблон
                url : url,
                dataType: 'text',
                complete: function(resp) {
                    var cache = 
                          this.cache[url] = _.template(resp.responseText); // парсим и заносим в кеш

                    _.each(this.pending[url], function(cb) { // обрабатываем очередь
                        cb(cache);
                    });

                    delete this.pending[url]; // очищаем очередь
                }.bind(this),
                error: function() {
                    throw new Error("Could not load " + url);
                }
            });
        }
    };

Загружая шаблон по ajax, имеем дополнительную возможность кешировать его средствами браузера.
Очередь сделана для того, чтобы загрузчик не грузил шаблон для каждого вида модели из нашей коллекции, а сделал это один раз и передал готовый для работы шаблон в каждый вид.

Надеюсь, что комментариев к коду достаточно, чтобы понять, как все работает.
Далее нам необходимо научить наши views работе с шаблонами по-новому.

Базовый класс вида для работы с шаблонами

Напишем базовый класс вида, чтобы он умел работать с нашим загрузчиком шаблонов.

    Core.View = Backbone.View.extend({
        renderQueue: false, // очередь запросов на рендеринг

        initialize: function() {
            if (this.templateUrl) {
                Core.Template.load(this.templateUrl, function(data) {
                    this.template = data; // запоминаем шаблон
                    if (this.renderQueue !== false) { // обработаем очередь на рендер
                        _.each(this.renderQueue, function(item) {
                            this._render.apply(this, item);
                        }.bind(this));
                        this.renderQueue = false;
                    }
                }.bind(this));
            }
        },

        _render: function() {}, // эта функция будет переопределяться в видах вместо render

        render: function() {
            if (!this.template) { // если шаблон не загружен - дождемся загрузки и отрендерим после
                this.renderQueue = this.renderQueue || [];
                this.renderQueue.push(arguments);
                return this;
            }
            return this._render.apply(this, arguments); //вызываем метод рендеринга
        }
    });

Таким образом, если у нас в параметрах вида передается templateUrl, то загружаем шаблон, иначе работаем по обычной логике.
Единственное отличие от стандартного поведения, функция непосредственного рендеринга выносится в метод _render. В принципе, ничто не мешает переписать код, оборачивающий все в метод render, но мне так показалось удобнее и проще.

Использование

Что на практике?
Вот так будет выглядеть измененная часть кода, показанного в начале статьи:

window.AppView = Core.View.extend({
    el: $("#todoapp"),

    // Загружаем шаблон отсюда
    templateUrl: '/templates/app.html',

    initialize: function() {
      AppView.__super__.initialize.apply(this); // вызываем родительский инициализатор

      ...
    }, 
    // Переименовываем render в _render и statsTemplate в template
    _render: function() {
      this.$('#todo-stats').html(this.template({
        total:      Todos.length,
        done:       Todos.done().length,
        remaining:  Todos.remaining().length
      }));
    },

    ...

Готово!

Код загрузчика доступен здесь.
Пример изменненного todo-туториала можно посмотреть здесь.
Если интересно, что поменялось в todo: diff

Спасибо за внимание!