8

我有一个使用模板文字的 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)))
  })

我不知道如何让 onclick 工作。我也尝试过将匿名函数传递Blog.js给 the postCreator，但没​​有成功。

有任何想法吗？

4

3 回答 3

4

如果您不想全局公开事件回调，则应将其附加到代码的 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))
  })

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

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

如果您绝对想使用内联 JS 而不暴露帮助器，则需要将您的定义为组件（例如自定义元素）。

于 2017-04-14T07:30:13.690 回答
2

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

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

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

const getBlueColor = () => 'blue'

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

<div>${getBlueColor()}</div>

发生的情况是在getBlueColor()执行该代码时正确调用了。

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

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

这里发生的事情getBlueColor是没有执行onclick，它实际上是在执行此模板文字时执行的。

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

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

但是现在假设您想将一些参数传递给这样的函数getOppositeColor(color)：

<div onclick="getOppositeColor(color)"><div>

这将不起作用，因为color不会被定义。所以你需要用模板文字和这样的字符串包装它：

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

现在有了这个，您将onclick在用户单击按钮时调用 ，并且您将传递给它一个color类似这样的字符串：

getOppositeColor('blue')
于 2021-03-15T23:52:43.260 回答
1 

const markUp = `
    <button onclick="myFunction()">Click me</button>
`;

document.body.innerHTML = markUp;

window.myFunction = () => {
    console.log('Button clicked');
};

于 2017-09-17T12:37:35.733 回答