Клуб API Карт

Не обновляется размер balloon'а у метки

FlinnRaider
25 ноября 2015, 10:39

В качестве основы использую вот этот пример - https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

 

При изменении контента балуна через placemark.properties.set('balloonContent', '...'), балун меняет свой размер в соответствии с кол-вом контента, руководствуясь инструкцями из макета балуна (примечание 1).

 

В моем случае нужно загрузить содержимое балуна через ajax вместе с некоторыми inline-скриптами (само-собой через простую вставку это не работает (примечание 2)).

Я загружаю контент при помощи jquery-pjax, который автоматически обновляет контент тега с указанным id (примечание 3).

При таком подходе контент в балуне обновляется, inline-скрипты выполняются, но его размер не изменяется.

 

Вопрос: какой метод или событие вызвать для того, чтобы инициировать обновление размеров балуна?

 

P.S. Общий пример кода в примечании 4.

 

$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]
// Строка 17 из этого примера https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

 

 var $balloonContentContainer = $('#my-balloon');
$.get('/get-my-balloon-content').done(function(renderedHtml){
    $balloonContentContainer.html(renderedHtml); // Это не отработает как необходимо, так как в возвращенном html есть inline-скрипты, которые нужно выполнить
})

  

$.pjax({
    timeout  : false,
    push      : false,
    replace   : false,
    url          : '/get-my-balloon-content',
    container: '#my-balloon'
});

 

 var placemark = new ymaps.Placemark(
    feature.geometry.coordinates,
    feature.properties,
    feature.options
);
placemark.events.add('balloonopen', () => {
    var selector = `#${placemark.properties.get('containerId')}`;
    var promise     = $.pjax({
        timeout  : false,
        push     : false,
        replace  : false,
        url      : placemark.properties.get('contentUrl'),
        container: selector
    });
  promise.done(() => {
      // Здесь нужно вызвать событие изменения размеров балуна. 
      // placemark.events.fire('change') // Что-то вроде этого.
  })
});

 

6 комментариев

Думаю, лучше всю эту загрузку делать из самого макета содержимого балуна, а не снаружи, и как загрузится кидать "change"

Обновил метод build из примера https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan (26 строка). Событие срабатывает, но изменения размеров не происходит.

 

Обновленный метод:

~~~

build                : function () {

    this.constructor.superclass.build.call(this);

    this._$element = $('.popover', this.getParentElement());

    this.applyElementOffset();

    this._$element.find('.close')

        .on('click', $.proxy(this.onCloseClick, this));

 

    var selector = `#${this._data.geoObject.properties.get('containerId')}`;

    var promise  = $.pjax({

        timeout  : false,

        push     : false,

        replace  : false,

        url      : this._data.geoObject.properties.get('contentUrl'),

        container: selector

    });

    promise.done(() => {

        this.events.fire('shapechange');

    });

},

~~~

Можете собрать минимальный пример на jsfiddle 

Загрузку во вложенном макете и на нем и кидать событие

https://jsfiddle.net/ex3kr3zf/3/

Огромное вам спасибо!