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

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

另外想问的是用window。是个好方法吗？

不胜感激

Answer 1

你可以使用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);
}

Also would like to ask is using window. is a good approach ?

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

Answer 2

您似乎希望能够 html 反映可能发生变化的对象的状态，这通常意味着能够以某种方式观察该状态。这通常意味着使用 library/framework，如 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
}

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

您会注意到按钮的文本没有改变。这段代码中没有任何内容可以强制 DOM 在原始值更改后进行更新，这使事情变得更加复杂。 DOM 的输出基本上没有绑定到它应该渲染的对象的状态。

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

Passing Object in es6 Template string

javascript

ecmascript-6

template-strings