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

拋出錯誤“結果”未定義。 如何使用模板字符串將結果對象傳遞給函數？

也想問是使用窗口。 是個好方法嗎？

幫助將不勝感激

Answer 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> 

在上面的示例中， 文本 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的輸出綁定到它應該呈現的對象的狀態。

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

也想問是使用窗口。 是個好方法嗎？

在這種情況下使用窗口對象是一個壞習慣