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>

在上面的示例中， 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的输出绑定到应该呈现的对象的状态。

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

也想问一下正在使用窗口。是个好方法吗？

在这种情况下，使用窗口对象是一种不好的习惯

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

2 个答案: