流星の動的に生成された各ブロックをクリックしてフォームを表示する方法は？

Question

流星のコードの各ブロックで動的に生成されたボタンをクリックしてフォームを表示するにはどうすればよいですか？

<div id="wCard"> 

       {{#each workflow}} 
       <div class="pheader"> 
        <h2>{{project}}</h2> 
        <hr width="90%"> 
       </div> 
        <br> 
       <div class="workflowcard"> 
       <div class="module-card"> 
        <div> 
        <div class="card-header wfmodule">{{workflowTitle}}</div> 
        <div class="assigned-tag">Assigned To:</div> 
        <div class="assigned-to">{{team}}<hr></div> 
        <div class="actions">No Actions Created</div> 
        </div> 
        <div> 
         due date 
        </div> 
       </div> 
       <div class="actionBtn"><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div> 

      </div> 
       {{/each}} 

     </div> 

フォームを送信すると、このカードが動的に生成されます。このカードには新しいアクションボタンがあり、動的に生成されたカードの新しいアクションボタンをクリックすると別のフォームが表示されます。

Answer 1

テンプレートヘルパーとjqueryを使用してください。

例コード： main.htmlを

<template name="test"> 
    <div id="form1" class="hidden"> 
     Form Stuff 
    </div> 

    <button id="click_button">Click to Show form</button> 

JavaScriptで[ファイル] - main.js

Template.test.events({ 
    "click #click_button" : function() { 
     $("#form1").removeClass("hidden"); 
} 

ブートストラップパッケージ（twbs:bootstrap）を持っている場合class="hidden"は動作しますが追加されました。