изменить содержимое балуна в Яндекс картах

Question

Есть сайт, на котором интегрирована карт Яндекс Карт JS API. С бэка приходят метки которые отображаются на карте, работа с картами построена в js на прототипах. Метки в свою очередь имеют балуны - html разметка, на которой указывается состояние объекта, допустим включено что - то или нет.
Есть проблема, когда состояние меняется с бека прилетает обновление, которое должно вызывать обновление этого балуна.

Вот так создаю метку и балун:

yandexMapEx.prototype.createMarker = function (data, options) {
$map = this;
var balloonTemplate = ymaps.templateLayoutFactory.createClass('<div class="infoBox" id="cg">' + $('<div>', { append: cP.create(data) }).html() + '</div>');
var _marker = new ymaps.Placemark([data.latitude, data.longitude],
    {
        iconContent: data.number            
    },
    {
        iconLayout: 'default#imageWithContent',
        iconContentLayout: $map.customContentLayout,
        iconImageHref: options.url,
        iconImageClipRect: [[options.origin[0], 0], [options.origin[0] + 60, 73]],
        iconImageSize: [options.size[0], options.size[1]],
        balloonShadow: true,
        balloonLayout: balloonTemplate,
        balloonOffset: [30, -150],
        iconImageOffset: [-30, -70],
        hideIconOnBalloonOpen: false
    });

$map.map.geoObjects.add(_marker);
return _marker;}

balloonTemplate - как раз то что отображается при клике на метку.

Пробовал сделать такую функцию с прототипом, чтобы установить новый html для балуна, таким образом:

yandexMapEx.prototype.SetBalloonLayout = function (marker, data) {
var ballonT = ymaps.templateLayoutFactory.createClass('<div class="infoBox" id="cg">' + $('<div>', { append: cP.create(data) }).html() + '</div>');
marker.balloonLayout = ballonT; }

Но такой вариант не работает.

Подскажите пожалуйста как можно этот балун поменять? можно ли менять вообще динамично такое?

Исправление
Было сделано примерно сделано, как предложили в ответе но, при открытии балуна, html текст просто выводится

По коду из того, что сделано:

var balloonTemplate = ymaps.templateLayoutFactory.createClass('{{ properties.append }}');
var _marker = new ymaps.Placemark([data.latitude, data.longitude],
    {
        iconContent: data.number,
        append: '<div class="infoBox" id="cg">' + $('<div>', { append: cP.create(data) }).html() + '</div>'
    },

Балун вызываю через функцию:

yandexMapEx.prototype.isOpenInfoBox = function (marker) {
if (!marker || !marker.balloon)
    return false;

return marker.balloon.isOpen();

Исправление 2
Мне кажется что-то должно быть похожее:

var balloonTemplate = ymaps.templateLayoutFactory.createClass('<div class="infoBox" id="cg">' + $('<div>', { append: '{{ properties.append }}' }).html() + '</div>');
var _marker = new ymaps.Placemark([data.latitude, data.longitude],
    {
        iconContent: data.number,
        append: cP.create(data)
    }

Но получаю такое при клике:

Answer 1

Динамические шаблоны работают немного не так. В шаблоне можно использовать свойства полей options и properties. Тогда при изменении этих свойств, изменится и шаблон. В вашем случае - примерно так:

yandexMapEx.prototype.createCupboardMarker = function (data, options) {
$map = this;
var balloonTemplate = ymaps.templateLayoutFactory.createClass('<div class="infoBox" id="cg"><div append:{{ properties.append }}></div>');
var _marker = new ymaps.Placemark([data.latitude, data.longitude],
    {
        iconContent: data.number,
        append: cP.create(data)
    },
    {
        iconLayout: 'default#imageWithContent',
        iconContentLayout: $map.customContentLayout,
        iconImageHref: options.url,
        iconImageClipRect: [[options.origin[0], 0], [options.origin[0] + 60, 73]],
        iconImageSize: [options.size[0], options.size[1]],
        balloonShadow: true,
        balloonLayout: balloonTemplate,
        balloonOffset: [30, -150],
        iconImageOffset: [-30, -70],
        hideIconOnBalloonOpen: false
    });

$map.map.geoObjects.add(_marker);
return _marker;}

Потом при необходимости меняете это свойство: marker.properties.set('append', newAppend);

Ещё примеры: https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/templateLayoutFactory

БЛОГ НА HUSL

изменить содержимое балуна в Яндекс картах

Ответы (1 шт):