Как получать значение data-атрибута при клике на кастомные placemark'и?

Question

[MatrikLog]

Я перебираю массив и вешаю на каждый созданный элемент атрибут data-id, который потом хочу при клике получить.

Исходные данные:

const fakeShops = [
    { name: "name1", cord: [55.751574, 37.573856] , id:1 },
    { name: "name2", cord: [56.751574, 38.573856] , id:2 },
    { name: "name3", cord: [57.751574, 39.573856] , id:3 },
    { name: "name4", cord: [58.751574, 40.573856] , id:4 },
  ];

Вот мой код, всё работает. Но при клике на разные метки data-атрибут оказывается одним и тем же:

fakeShops.forEach((shop,i)=>{
    let content = ymaps?.templateLayoutFactory?.createClass(
      `<div id="map_point" data-id=${fakeShops[i].id} class="text">
      123
      <div class="place_title">
      <div>test</div>
      <div>
      <img src="https://cdn1.iconfinder.com/data/icons/interface-travel-and-environment/64/star-interface-256.png" style="width:12px;heigth:12px">
      <span class="text_small">
      4,5 Капучино от 190 р
      </span>
      </div>
      </div>
      </div>`
    );
      const myGeoObject = new ymaps.Placemark(
        fakeShops[i].cord,
        {
          hintContent: fakeShops[i].name,
        },
        {
          iconLayout: content, 
          iconShape: {
            type: "Rectangle",
            coordinates: [
              [-95, -88],
              [85, 78],
            ],
          },
        }
      );
        localMap.geoObjects.add(myGeoObject);
        myGeoObject.events.add("click", function (e) {
          const dom = document.getElementById("map_point");
          console.log(dom.dataset.id); // тут выводит всегда 1 , проблемка
        });
  })

Что я делаю не так?

Answer 1

[0xD34F]

Не надо никаких data-атрибутов. Передавайте эти id в properties (второй параметр конструктора) placemark'ов, при клике получайте:

e.get('target').properties.get('имяСвойстваСодержащегоId')

Ну а что до показанного вами кода...

• Почему в шаблоны placemark'ов зашивается id? Неужели вы до сих пор не в курсе, что id должны быть уникальны? Кстати, поэтому у вас и "выводит всегда 1" - ищите элемент по id, вот и получаете всегда первый из созданных.
  
• Зачем вообще понадобилось искать элемент и читать data-атрибут, значение которого вам и так доступно внутри обработчика (shop.id)?
  
• Создавать отдельный layout под каждый placemark не надо. Вынесите создание layout'а за пределы цикла. Если надо передавать в шаблон какие-то уникальные значения, то их опять же можно подтянуть из свойств. Как бы это выглядело для вашего data-атрибута:
  
  

  <div data-id="{{ properties.имяСвойстваСодержащегоId }}">

  
  Также не надо создавать отдельные функции, назначаемые в качестве обработчиков клика - создайте один обработчик за пределами цикла (да, достать id из shop после этого уже не получится, как было сказано в начале - передавайте его через properties).
  

Comments

[MatrikLog]

Спасибо , за ревью кода особенно :)