javascript - 如何在单击 meteor 中动态生成的每个 block 时显示表单？

Question

如何在 meteor 中的每个代码块上单击动态生成的按钮来显示表单？

<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。

示例代码: 主.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");
}

class="hidden" 将在您添加 Bootstrap 包 (twbs:bootstrap) 时起作用。