javascript - 模板文字注入(inject)对象并传递给函数

Question

我有以下代码，我想使用模板文字将订单对象传递给deleteOrder 函数。

function updateUI() {

    let orderItems = orders.map(function(order){
      return `<li class="order">
      <label>${order.name}</label>
      <p>${order.coffee}</p>
      <button onclick="deleteOrder(\"${order.key}\")">Remove</button>
      </li>`
    })

    ordersList.innerHTML = orderItems.join('')

}

解决方案:

function updateUI() {

    let orderItems = orders.map(function(order){
      return `<li class="order">
      <label>${order.name}</label>
      <p>${order.coffee}</p>
      <button onclick="deleteOrder('${order.key}')">Remove</button>
      </li>`
    })

    ordersList.innerHTML = orderItems.join('')

}

Answer 1

正如您所发现的那样，内联处理程序是不好的做法并且难以管理。另外，无论您以 HTML 的方式表示对象，都无法使其 === 变为原始对象(因此，例如，您不能使用 includes 检查数组是否包含该对象)。使用 Javascript 正确附加处理程序，以便可以通过其闭包引用 order:

let orderItems = orders.map((order) => {
  const li = document.createElement('li');
  li.className = 'order';
  li.innerHTML = `
    <label>${order.name}</label>
    <p>${order.coffee}</p>
    <button>Remove</button>`;
  li.children[2].addEventListener('click', () => {
    deleteOrder(order);
  });
  return li;
});

如果你不想使用.children[index]，如果你的li只有一个按钮，你可以选择它使用querySelector:

li.querySelector('button').addEventListener...

请注意，这将导致 orderItems 返回一个元素数组，而不是一个字符串数组，因此不要使用结果来分配给某些 innerHTML，在容器上调用 appendChild 来附加 li。例如:

const lis = orderItems(orderArr);
lis.forEach((li) => {
  container.appendChild(li);
});

如果您想将 order.key 传递给 deleteOrder 而不是传递 order，则替换

deleteOrder(order);

与

deleteOrder(order.key);

虽然不应使用内联处理程序，但这样做的方法是在整个 onclick 属性周围使用双引号，并在 order.key 周围使用单引号> 字符串，确保转义 order.key 中的任何单引号或双引号:

const escapedKey = order.key.replace(/['"]/g, '\\$&');
// ...
<button onclick="deleteOrder('${escapedKey}')">Remove</button>

但是转义是丑陋且不优雅的 - 请使用 Javascript 附加处理程序。