Передача объекта в строку шаблона es6

Question

У меня есть этот сегмент кода ниже

${res.result.map(resultObj =>
`<div class="col-sm-4 mb-4">
   <a class="btn btn-primary" onclick="getEditable(resultObj)">Edit</a>
 </div>`
)};


window.getEditable = (resultObj) => {
  console.log(resultObj);
}

Это выдает ошибку "результаты" не определено. Как передать объект результатов в функцию, используя Template String?

Также хотел бы спросить, используя окно. хороший подход?

Помощь будет оценена

Answer 1

Кажется, что вы хотите, чтобы html отражал состояние объекта, который может измениться, и это обычно означает возможность наблюдать это состояние каким-то образом. Это часто означает использование библиотеки / фреймворка, такого как React или Vue, поскольку выполнение такого рода реактивности становится нелегким, когда проект выходит за рамки тривиального размера.

---

Вот минимальный пример, чтобы продемонстрировать проблему:

const el = document.getElementById('output')

const values = [
  {
    id: 1
  },
  {
    id: 2
  },
]

const log = text => {
  console.log(text)
}

el.innerHTML = values.map(valueIter => `
  <button onclick="log(valueIter)">
    ${valueIter.id}
  </button>
`);

<button onclick="log(valueIter)">Test Button</button>
<div id="output"></div>

В приведенном выше примере текст valueIter попадает в onclick вызов функции, фактический объект, который является частью map вызов. Заменить это на ${valueIter.id} вместо того, чтобы передать текст valueIter свойство id Если это изменится, мы все равно получим исходное значение.

Альтернативой было бы получить доступ к фактическому значению, которое должно быть зарегистрировано:

const el = document.getElementById('output')

const values = [
  {
    id: 1
  },
  {
    id: 2
  },
]

const log = text => console.log(text)

el.innerHTML = values.map((value, i) => `
  <button onclick="log(values[${i}])">
    ${value.id}
  </button>
`)

values[0] = {
  id: 99
}

<div id="output"></div>

Вы заметите, что текст кнопки не меняется. В этом коде нет ничего, что заставляло бы DOM обновляться после изменения исходного значения, в результате чего все становится немного сложнее. По сути, ничто не связывает вывод DOM с состоянием объекта, который он должен отображать.

Answer 2

Вы можете использовать идентификатор

res.result.map(results =>
  `<div class="col-sm-4 mb-4">
    <a class="btn btn-primary" onclick="getEditable(${results.id})">Edit</a>
  </div>`
);

var getEditable = id => {
  var resultObj = res.result.find(elem => {
    return elem.id == id;
  });
  console.log(resultObj);
}

Также хотел бы спросить, используя окно. хороший подход?

Использование объекта окна в этом случае является плохой практикой