Template

Templating engine. The Yandex.Maps API supports the base syntax for the Twig/Django Templates languages. The following operations are supported:

  • Substitution value - {{ field_name }}.
  • If the requested data field is missing or has an empty value you can provide the default value - {{ field_name|default:default_value }} The default value can be a number, a string (in quotes) or a different data field.
  • By default the value is processed by the escape function to prevent XSS vulnerabilities. To undo this behavior, add the "raw" filter - {{ field_name|default: default_value|raw }}.
  • Using the template.filtersStorage you can create your own filters and use them similarly to the described above.
  • To insert a sub layout, use a construction like {% include field_name_or_key %}. The templating engine when it founds such a construction, will try to use the value in the field as a key of the nested layout.
  • The condition is written as:

    {% if condition %} ... {% else %} ... {% endif %} or you can ommit the else or elseif block. You can use any constructions of the template language inside if, else and elseif blocks.

  • Use the for construction to iterate an array or an object.

    {% for value in array_or_hash %} ... {% endfor %}. You can use any constructions of the template language inside the for block.

  • To obtain the iteration index in the array or the field name in the hash, use the following construction:

    {% for key, value in array_or_hash %} ... {% endfor %}.

Constructor | Methods

Constructor

Template(text)

Parameters:

ParameterDefault valueDescription
text *

Type: String

Template string

* Mandatory parameter/option.

Examples:

1.

// Getting the user name from the data manager data.Manager.
// If the name is not specified, the result string will be «Unregistered user».
var data = new ymaps.data.Manager({
    user: {
        name: "Viktor",
        age: 25
    },
    home: [55.72725771214265, 37.640390506634006]
});

var template = new ymaps.Template('{{ user.name |default: "Unregistered user"}}');
var result = template.build(data);
console.log(result.text); // Outputs «Viktor» to the console.

2.

// Let's assume we have 3 user groups and we need to print an individual greeting for each group.
var data = new ymaps.data.Manager({
    groups: {
        administrator: {
            id: 1,
            name: "administrator"
        },
        moderator: {
            id: 2,
            name: "moderator"
        },
        user: {
            id: 3,
            name: "user"
        }
    },
    userGroupId: 2
});
var template = new ymaps.Template('Hi, \
    {% if (userGroupId == 1) %}{{ groups.administrator.name }}\
    {% elseif (userGroupId == 2) %}{{ groups.moderator.name }}\
    {% elseif (userGroupId == 3) %}{{ groups.user.name }}\
    {% else %}guest{% endif %}!'
);

var result = template.build(data);
console.log(result.text); // Outputs «Hi, moderator!» to the console.

Methods

NameReturnsDescription
build(data)

Object

Returns object with following fields:
  • {String} text — the result of templating.
  • {Object[]} renderedValues - an array with the used data from the manager.

Methods details

build

{Object} build(data)
Returns object with following fields:
  • {String} text — the result of templating.
  • {Object[]} renderedValues - an array with the used data from the manager.

Parameters:

ParameterDefault valueDescription
data *

Type: IDataManager

Data manager.

* Mandatory parameter/option.

Example:

// Let's get the house address from the existing coordinates and output (according to the template)
// all its inhabitants in the format: «name: age».
var data = new ymaps.data.Manager({
    users: [
        {name: "Vitaly", age: 40},
        {name: "George", age: 20}
    ],
    home: {
        coords: [55.736652, 37.620589],
        address: null
    }
});
var template = new ymaps.Template('{{home.address}}: <ul>{% for user in users %}<li>{{user.name}}: {{user.age}}</li>{% endfor %}</ul>');

// Let's do the reverse geocoding using geocode.
ymaps.geocode(data.get('home.coords')).then(function (res) {
    var address = res.geoObjects.get(0).properties.get('name');
    // Setting the obtained address to the manager.
    data.set('home.address', address);

    // Completing the template with the obtained data.
    var result = template.build(data);
    // Output the result to the console.
    console.log(result.text);
});