Marionette.Renderer

Объект Renderer был отделен от процесса рендеринга ItemView с целью создать консистентный и переиспользуемый способ рендеринга шаблонов с данными и без.

Содержание

• Основное применение
• Предварительно скомпилированные шаблоны
• Собственная выборка шаблона и рендеринг
• Использование предварительно скомпилированных шаблонов

Основное применение

Основное применение Renderer заключается в вызове метода render. Этот метод возвращает строку, содержащую результат наложения объекта данных data на шаблон template.

var template = "#some-template";
var data = {foo: "bar"};
var html = Marionette.Renderer.render(template, data);

// какие-то манипуляции с HTML

Если в качестве параметра template передать «лживое» значение, то метод render сгенерирует исключение о том, что шаблон не был указан.

Предварительно скомпилированные шаблоны

Если параметр template функции render сам является функцией, то Renderer рассматривает его как предварительно скомпилированный шаблон и не пытается его скомпилировать снова. Это позволяет любому представлению, которое поддерживает параметр template, задавать функцию предварительно скомпилированного шаблона в качестве значения для параметра template.

var myTemplate = _.template("<div>foo</div>");
Marionette.ItemView.extend({
  template: myTemplate
});

Эта функция не должна иметь какой-либо шаблонизатор. Она должна быть просто функцией, которая возвращает валидный HTML в виде строки согласно значению аргумента data, которое было передано в функцию.

Собственная выборка шаблона и рендеринг

По умолчанию Renderer примет jQuery-селектор в качестве первого параметра и JSON-объект с данными в качестве опционального второго параметра. Затем Renderer использует объект TemplateCache для загрузки шаблона по указанному селектору и рендерит шаблон с предоставленными данными, используя шаблонизатор Underscore.js.

Если вы хотите переопределить способ загрузки шаблона, то ознакомьтесь с объектом TemplateCache. Если вы хотите переопределить используемый шаблонизатор, то измените метод render по своему усмотрению:

Marionette.Renderer.render = function(template, data) {
  return $(template).tmpl(data);
});

Эта реализация заменит используемый по умолчанию рендеринг с помощью Underscore.js на рендеринг с помощью шаблонов jQuery.

Если вы переопределите метод render и захотите использовать механизм TemplateCache, то не забудьте включить код, необходимый для получения шаблона из кэша:

Marionette.Renderer.render = function(template, data) {
  var template = Marionette.TemplateCache.get(template);
  // Какие-то действия с шаблоном
};

Использование предварительно скомпилированных шаблонов

Вы легко можете заменить стандартный рендеринг шаблонов на предварительно скомпилированные шаблоны, например, те, которые предусмотрены плагинами JST или TPL для AMD/RequireJS.

Чтобы сделать это, просто переопределите метод render на метод, который вернет исполняемый шаблон с данными.

Marionette.Renderer.render = function(template, data) {
  return template(data);
};

Затем вы можете указать функцию предварительно скомпилированного шаблона как значение атрибута template вашего представления:

var myPrecompiledTemplate = _.template("<div>some template</div>");

Marionette.ItemView.extend({
  template: myPrecompiledTemplate
});