Рендерер Marionette

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

Индекс документации

• Устаревший Marionette.Renderer
• Настройка рендерера
• Базовое использование
• Прескомпилированные шаблоны
• Настройка выбора и рендеринга шаблонов
• Использование прескомпилированных шаблонов

Устаревший Marionette.Renderer

Настройка объекта Renderer устарела в пользу метода setRenderer.

Объект Renderer был выделен из процесса рендеринга View, чтобы создать последовательный и многоразовый метод рендеринга шаблона с данными или без них.

Настройка рендерера

Вы можете установить рендерер для класса представления, используя метод класса setRenderer. Рендерер принимает два аргумента. Первый — шаблон, переданный представлению, а второй — данные, которые нужно отобразить в шаблоне. Рендерер должен вернуть строку, содержащую результат применения данных к шаблону.

Marionette.View.setRenderer(function(template, data) {
  return _.template(template)(data);
});

var myView = new Marionette.View({
  template: 'Hello <%- name %>!',
  model: new Backbone.Model({ name: 'World' })
});

myView.render();

myView.el === '<div>Hello World!</div>';

Рендерер также может быть настроен отдельно для любого расширенного представления.

var MyHBSView = Marionette.View.extend();

MyHBSView.setRenderer(function(template, data) {
  return Handlebars.compile(template)(data);
});

var myHBSView = new MyHBSView({
  template: 'Hello {{ name }}!',
  model: new Backbone.Model({ name: 'World' })
});

myHBSView.render();

myHBSView.el === '<div>Hello World!</div>';

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

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

var Mn = require('backbone.marionette');
var template = '#some-template';
var data = {foo: 'bar'};
var html = Mn.Renderer.render(template, data);

// do something with the HTML here

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

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

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

var Mn = require('backbone.marionette');
var myTemplate = _.template('<div>foo</div>');

Mn.View.extend({
  template: myTemplate
});

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

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

По умолчанию рендерер принимает либо прескомпилированный шаблон, либо объект селектора jQuery в качестве первого параметра и объект JSON данных в качестве необязательного второго параметра, а также объект представления или CompositeView в качестве необязательного третьего параметра. Если первый параметр не является прескомпилированным, он использует TemplateCache для загрузки шаблона по указанному селектору и рендерит шаблон с предоставленными данными (если таковые имеются) с использованием шаблонов Underscore.

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

Если вы хотите переопределить используемую систему шаблонизации, измените метод render как вам нужно:

var Mn = require('backbone.marionette');

Mn.Renderer.render = function(template, data, view){
  template += view.getState();
  return $(template).tmpl(data);
};

Это реализация заменит стандартный рендеринг Underscore на рендеринг с помощью jQuery Templates.

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

var Mn = require('backbone.marionette');

Mn.Renderer.render = function(template, data){
  var template = Mn.TemplateCache.get(template);
  // Do something with the template here
};

Для получения более подробной информации о шаблонах в целом, см. Документацию по шаблонам.

См. Документацию по TemplateCache для более подробной информации.