テンプレートリテラルにHTMLボタン「onclick」を設定する

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

私が理解できないことは、onclickを動作させる方法です。私はBlog.jsのanon関数をに渡してみました。

アイデア？あなたは、グローバルイベントコールバックを公開したくない場合は

Answer 1

、あなたはaddEventListener()で、コードのJSの部分でそれを添付する必要があります

// 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に追加、または私はすべてのblogDivにquerySelector()を避けるために、ドキュメント・または<tempalte>を使用することになります。

---

あなたは絶対にあなたがコンポーネント（例えばカスタム要素）としてあなたをDEFINTする必要がありますヘルパーをさらすことなく、インラインJSを使用したい場合。

Answer 2

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

 
document.body.innerHTML = markUp; 
 

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