Передача объекта в строку шаблона es6 - PullRequest
Новая
       41

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

0 голосов
/ 21 сентября 2018

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

${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);
}

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

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

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

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Кажется, что вы хотите, чтобы 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} вместо этого передаст текст свойства id valueIter.Однако, если это изменится, мы все равно получим исходное значение.

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

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 с состоянием объекта, который он должен отображать.

0 голосов
/ 21 сентября 2018

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

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);
}

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

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

...