在模板文字中设置 HTML 按钮"点击"

Question

我有一个使用模板文字的html模板。该函数如下所示

// postCreator.js
export const blogPostMaker = ({ title, content, address, id }, deletePost) => {
const innerHtml = `
<blog-post>
<h1 class='title'>${title}</h1>
<p class='content'>${content}</p>
<p class='address'>${address}</p>
<button onclick='${() => deletePost(id)}'>Delete</button>
</blog-post>
`
return innerHtml
}

//Blog.js
postHelper.getSeriesOfPosts(10)
.then(resp => {
resp.forEach(post => (blogDiv.innerHTML += blogPostMaker(post, postHelper.deletePost)))
})

我无法弄清楚的是如何让点击工作。我也尝试将 anon 函数传递给Blog.jspostCreator，但没有运气。

有什么想法吗？

Answer 1

如果不想全局公开事件回调，则应将其附加到代码的 JS 部分中，并带有addEventListener()：

// postCreator.js
export const blogPostMaker = ({ title, content, address, id }) => 
`
<blog-post id='${id}'>
<h1 class='title'>${title}</h1>
<p class='content'>${content}</p>
<p class='address'>${address}</p>
<button>Delete</button>
</blog-post>
`
//Blog.js
postHelper.getSeriesOfPosts(10).then(resp => {
resp.forEach(post => {
blogDiv.innerHTML += blogPostMaker(post)
blogDiv.querySelector(`blog-post[id="${post.id}"] > button`)
.addEventListener('click', () => postHelper.deletePost(post.id))
})

注意：这不是最有效的方法，但它会保留您的文件结构。

相反，我会直接使用createElement()创建<button>，然后使用appendChild()将其添加到 DOM 中，或者我会使用 DocumentFragment 或<template>以避免在所有blogDiv上querySelector()。

---

如果您绝对想在不公开帮助程序的情况下使用内联 JS，则需要将 YOU 定义为组件(例如自定义元素)。

Answer 2

Miroslav Savovski 的解决方案有效，但他们没有解释原因，所以我想我会添加这个答案背后的原因以及它实际工作方式的逐步说明，以及为什么 OP 的解决方案最初不起作用。

TLDR？滚动到最后两个代码片段。

使用模板文字，当您将函数放入其中时，它会执行该函数，因此假设我们有一个简单的函数，它只返回一串'blue'：

const getBlueColor = () => 'blue'

然后我们在模板文本中调用这个函数，如下所示：

`The color is ${getBlueColor()}`

发生的情况是在执行该代码时立即调用getBlueColor()。

现在让我们假设我们想这样做onclick，而不是像这样：

<button onclick="${getBlueColor()}"></button>

正在发生的事情是getBlueColor没有onclick执行，它实际上是在执行模板文本时执行的。

我们解决此问题的方法是通过简单地删除模板文字来防止模板文字执行此函数：

<button onclick="getBlueColor()"></button>

但是现在假设你想将一些参数传递给一个函数，如下所示getOppositeColor(color)：

<button onclick="getOppositeColor(color)"></button>

这将不起作用，因为不会定义color。因此，您需要将其包装为模板文字和如下所示的字符串：

<button onclick="getOppositeColor('${color}')"><button>

现在有了这个，您将在用户单击按钮时调用onclick，并且您将向它传递一串color，如下所示：

getOppositeColor('blue')

Answer 3

const markUp = `
<button onclick="myFunction()">Click me</button>
`;
document.body.innerHTML = markUp;
window.myFunction = () => {
console.log('Button clicked');
};