templateLayoutFactory
Статический объект.
Фабрика для создания макетов из шаблонов.
Позволяет создавать классы, реализующие интерфейс ILayout, используя язык шаблонов.
Шаблон представляет собой фрагмент html-кода со следующими подстановками:
- $[имя_поля|значение_по_умолчанию] - подставляет указанное поле данных либо значение по умолчанию, если такого поля нет;
- $[[имя_поля]] - для отображения вложенных макетов; шаблонизатор, встретив такую конструкцию, попытается использовать значение в поле как ключ или класс вложенного макета;
- [if имя_поля]шаблон1[else]шаблон2[endif] - в зависимости от значения поля будет подставлен или шаблон1, или шаблон2; секция [else] может отсутствовать;
- [ifdef имя_поля]шаблон1[else]шаблон2[endif] - то же, что и конструкция if, но условие считается истинным при любом значении поля, кроме undefined.
См.: layout.templateBased.Base
Пример:
// В примерах используется jQuery, загруженный с http://yandex.st/jquery/1.6.4/jquery.min.js
// Пример 1. Применение макетов к геообъекту.
// Создание макета контента балуна. Здесь обращаемся к опции балуна contentBodyLayout, заданной в геообъекте
// с префиксом balloon. В данном случае options.contentBodyLayout - вложенный макет.
var myBalloonContentLayout = ymaps.templateLayoutFactory.createClass('<p>$[[options.contentBodyLayout]]</p>');
// Создание макета основного содержимого контента балуна.
var counter = 0,
myBalloonContentBodyLayout = ymaps.templateLayoutFactory.createClass(
'<b>$[properties.name]</b><br /><button id="counter-button">Counter</button> <i id="count"></i>', {
build: function () {
myBalloonContentBodyLayout.superclass.build.call(this);
$('#counter-button').bind('click', this.onCounterClick);
$('#count').html(counter);
},
clear: function () {
$('#counter-button').unbind('click', this.onCounterClick);
myBalloonContentBodyLayout.superclass.clear.call(this);
},
onCounterClick: function () {
$('#count').html(++counter);
}
});
// Создание макета для контента метки.
var myIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<h3 id="layout-element">$[properties.name]</h3>' +
'[if properties.description]<i>$[properties.description]</i>[else]$[properties.metaDataProperty.description][endif]', {
build: function () {
// необходим вызов родительского метода, чтобы добавить содержимое макета в DOM
this.constructor.superclass.build.call(this);
$('#layout-element').bind('mouseover', this.onNameHover);
},
clear: function () {
$('#layout-element').unbind('mouseover', this.onNameHover);
this.constructor.superclass.clear.call(this);
},
onNameHover: function () {
$('#layout-element').css('color', getRandomColor());
}
});
var getRandomColor = function () {
return 'rgb(' +
[Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256) ].join(',') +
')';
};
var myGeoObject = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [55.650625, 37.62708]
},
properties: {
name: 'my name',
metaDataProperty: {
description: 'metaData description'
}
}
}, {
balloonContentBodyLayout: myBalloonContentBodyLayout,
balloonContentLayout: myBalloonContentLayout,
iconContentLayout: myIconContentLayout,
// Выставляем тянущийся макет иконки, чтобы вместился вложенный макет myIconContentLayout.
preset: 'twirl#nightStretchyIcon'
});
map.geoObjects.add(myGeoObject);
// Установим через 5 секунд свойство в геообъекте. Макет контента иконки отследит это обновление и обновит содержимое.
setTimeout(function () {
myGeoObject.properties.set('description', 'my description after timeout');
}, 5000);
// Пример 2. Открытие балуна на карте с заданными макетами.
map.balloon.open(map.getCenter(), {
myBodyContent: '<b>body content</b>',
myFooterContent: 'footer content'
}, {
contentBodyLayout: ymaps.templateLayoutFactory.createClass('<p>$[myBodyContent]</p>'),
contentFooterLayout: ymaps.templateLayoutFactory.createClass('<i>$[myFooterContent]</i>')
});
Методы
Имя | Статический | Возвращает | Описание |
---|---|---|---|
templateLayoutFactory.createClass(template[, overrides]) | Function | Returns конструктор макета. Созданный класс будет унаследован от класса layout.templateBased.Base с переопределением списка методов, указанных в overrides. |
Имя | Статический | Возвращает | Описание |
---|---|---|---|
templateLayoutFactory.createClass(template[, overrides]) | Function | Returns конструктор макета. Созданный класс будет унаследован от класса layout.templateBased.Base с переопределением списка методов, указанных в overrides. |
Описание методов
createClass
Returns конструктор макета. Созданный класс будет унаследован от класса layout.templateBased.Base с переопределением списка методов, указанных в overrides.
Параметры:
Параметр | Значение по умолчанию | Описание |
---|---|---|
template * | — | Тип: String Шаблон html-содержимого макетов. |
overrides | — | Тип: Object Переопределения родительских методов. Можно переопределять/дополнять методы build, clear и rebuild. |
* Обязательный параметр/опция.