在 es6 模板字符串中传递对象答案

【问题标题】：Passing Object in es6 Template string在 es6 模板字符串中传递对象
【发布时间】：2019-02-25 16:37:46
【问题描述】：

我有这个下面的代码段

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

这会引发错误“结果”未定义。我应该如何使用模板字符串将结果对象传递给函数？

还想问是用window.是个好方法吗？

我们将不胜感激

【问题讨论】：

只有当你点击按钮时才会抛出这个错误？
那是什么${…};？
您不应该为 HTML 使用模板字符串。使用 DOM，并将您的函数附加为事件侦听器。不，使用全局 window.getEditable 变量不是一个好方法
@OliverRadini 是的，单击按钮时会引发错误

标签： javascript ecmascript-6 template-strings

【解决方案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>

在上面的示例中，text 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
}

&lt;div id="output"&gt;&lt;/div&gt;

您会注意到按钮的文本没有改变。这段代码中没有任何内容可以在原始值更改后强制 DOM 更新，这就是事情变得相当复杂的地方。基本上没有任何东西将 DOM 的输出绑定到它应该呈现的对象的状态。

【讨论】：

这是一个了不起的解释..非常感谢
不客气，如果有什么不清楚的地方请告诉我，这很可能取决于我的解释！
这对我来说非常清楚......但问题是当我点击按钮时，它说“值”未定义
values 部分需要引用您要使用的任何部分，例如，对您而言，我认为它将是 results。当然，它需要对被调用的函数可用。
我将您的答案标记为正确，因为有很好的解释和方法。虽然我无法让它工作:)

【解决方案2】：

你可以使用id

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

还想问是用window.是个好方法吗？

在这种情况下使用窗口对象是一种不好的做法

【讨论】：

我在 jsbin 上测试了这段代码，它工作正常