Клуб API Карт

EVENT на ссылку внутри кластера

azhirov1991
8 августа 2016, 12:50

Не поулчается повесить событие на ссылку внутри кластера. При открытии балуна - вешается событие на ссылку, что видимая. При переключении в меню пунктов - событие не вешается.

var clickBalloonClose = function(){
		for( var i = 0; i < myCollection.getLength(); i++ ){
			myCollection.get(i).options.set('visible', true);
		}
	};

clusterer.events.add('click', clickOnPlacemark);
clusterer.events.add('balloonclose', clickBalloonClose);

function clickOnPlacemark(e){
	var clickBalloon = function(){
		if($('.list-item').is(':visible')){
			$('.list-item').click(function(){
				for( var i = 0; i < myCollection.getLength(); i++ ){
					if(myCollection.get(i).properties.get('identifier') != this.id){
						myCollection.get(i).options.set('visible', false);
					}else{
						myCollection.get(i).options.set('visible', true);
					}
					$('.open-more-card').click(function(){moreCardSearch.show();});
				}
			}).click();
		}else{
			for( var i = 0; i < myCollection.getLength(); i++ ){
				if(myCollection.get(i).properties.get('identifier') != e.get('target').properties.get('identifier')){
					myCollection.get(i).options.set('visible', false);
				}else{
					myCollection.get(i).options.set('visible', true);
				}
			}
		}
$('.open-more-card').click(function(){moreCardSearch.show();});
		clusterer.events.remove('balloonopen', clickBalloon);
	};
	clusterer.events.add('balloonopen', clickBalloon);
}

window.moreCardSearch = new rpDialog( "#moreCard", {
		id: "card",
		width: 750,
		heigth: 500
	});

Или событие какое есть, которое определяет открытие пункта в меню, что-то вроде - открытие Placemark'a на карте...

Пробовал так делать:

Placemark.events.add('click', function(){
            $('.open-more-card').click(function(){moreCardSearch.show();});
        });

clusterer.add(Placemark);

далее код...

Но всё равно не работает.. Или что-то не то делаю.

4 комментария
Подписаться на комментарии к посту
По коду в посте мало что можно понять.
У вас используется и геоколлекция и кластеризатор? Соберите минимальный пример на jsfiddle


Обычно делается через макет содержимого балуна, пример см. как реализовано закрытие балуна



dimik,
В общем - суть такая. Я добавляю несколько кластеров на карту. Внутри каждого кластера несколько Placemark с такими внутренностями:


getPointData = function (cityOne, id, volume, capacity, nds, distance, cityTwo) {
return {
balloonContentBody: [
'<address>' +
'<b>Загрузка:</b> ' + cityOne +
'<br/>' +
'<b>ID объявления:</b> ' + id +
'<br/>' +
'<b>Вес/Объём:</b> ' + volume + '/' + capacity +
'<br/>' +
'<b>' + nds + '</b> (' + (distance/nds) + ' р/км)' +
'<br/>' +
'<b>Разгрузка:</b> ' + cityTwo +
'<br/>' +
'<b>Расстояние:</b> ' + distance +
'<br/>' +
'<a class="open-more-card" data-id="' + id + '" href="javascript:;">Подробно</a>' +
'</address>'
],
clusterCaption: '<strong class="list-item" id=' + id + '>' + cityOne + " => " + cityTwo + '</strong>',
identifier: id
};
}


Единственное, что мне нужно - это узнать, как при клике в списке кластера повесить событие на ссылку внутри контента.
Ведь можно как-то обратиться к открытому балуну и узнать, какой пункт сейчас выбран в списке, чтобы повесить внутри выбранного элемента (Placemark'a) событие по клику на ссылке?
azhirov1991,
Балун ничего не знает о своем содержимом. И лучше так не клеить html, а хранить его в макете, а в properties метки хранить простые данные такие как volume, distance и пр.
Ваша задача решается через собственный макет содержимого кластера, в методе build макета вам нужно подписаться на клик на нужном элементе, а в методе clear – отписаться
См. пример в песочнице
Ваша реализация customItemContentLayout должна быть примерно такая
var customItemContentLayout = ymaps.templateLayoutFactory.createClass([
'<address>',
'<b>Загрузка:</b> {{ properties.cityOne }} ',
'<br/>',
'<b>ID объявления:</b> {{ properties.id }}',
'<br/>' +
'<b>Вес/Объём:</b>{{ properties.volume }} / {{ properties.volume }}',
'<br/>',
'<b>{{ properties.nds }}</b> ({{properties.distance / properties.nds}}) р/км)',
'<br/>' +
'<b>Разгрузка:</b>{{ properties.cityTwo}}',
'<br/>',
'<b>Расстояние:</b> {{properties.distance}}',
'<br/>',
'<a class="open-more-card" data-id="{{properties.id}}">Подробно</a>',
'</address>'
].join(''), {
build: function() {
jQuery('.open-more-card', this.getParentElement()).on('click', jQuery.proxy(this.handleMoreClick, this));
},
clear: function() {
jQuery('.open-more-card', this.getParentElement()).off('click');
},
handleMoreClick(e) {
console.log('click!!!')
}
});
dimik,
Я нашёл ещё один способо...


e.get('target').state.events.add('change', function () {
$('.open-more-card').click(function(){moreCardSearch.show();});
});