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.

Описание методов

createClass

{Function}  <static> templateLayoutFactory.createClass(template[, overrides])

Returns конструктор макета. Созданный класс будет унаследован от класса layout.templateBased.Base с переопределением списка методов, указанных в overrides.

Параметры:

Параметр Значение по умолчанию Описание
template *

Тип: String

Шаблон html-содержимого макетов.

overrides

Тип: Object

Переопределения родительских методов. Можно переопределять/дополнять методы build, clear и rebuild.

* Обязательный параметр/опция.