时间戳

首页 > 解决方案 > 在 es6 模板字符串中传递对象

javascript - 在 es6 模板字符串中传递对象

问题描述

我在下面的代码段中有这个

${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 将结果对象传递给函数？

还想问一下是用window。是个好办法吗？

帮助将不胜感激

标签： javascriptecmascript-6template-strings

解决方案

似乎您希望能够让 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。将其替换为将传递id 属性${valueIter.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 的输出绑定到它应该呈现的对象的状态。

推荐阅读