如何在单个模板中使用多个动态ID

Question

我有一张带按钮的卡，在提交表单后动态生成。我想通过按钮切换点击卡片上的按钮来显示内容。当我点击切换的按钮时，下一步就是同样的过程。

我的问题是可以说我有2张卡（Card1和Card2）。当我点击第一张牌的按钮时，点击功能正在申请这两张牌。但它应该申请卡1.这是我面临的问题。任何人都可以帮忙吗？

这里是我的代码：

<template name ="workflow"> 
    <div id="newActionCard" > 

     {{#each newaction}} 

        <div class="workflowcard"> 
        <div class="module-card-small"> 
         <div class="res-border"></div> 
         <div class="card-img">{{team}}</div> 
         <div class="res-content"> 

       <div class=" newaction-name">{{action_title}}</div><hr> 
       <div class="newaction-des">{{description}}</div> 
       <!-- <div class=" due-on">Due on:{{d_date}}</div><hr>--> 

        </div> 
        <div class="due"> 

       Due on: 
        <div> 
         <div class="day-stamp">{{weekday d_date}}</div> 
        <div class="date-stamp">{{date d_date}}</div> 
        <div class="month-stamp">{{month d_date}}</div> 
        </div> 
       </div> 

        {{> actioncardsubcontent}} 

        {{> requestextensioncard}} 

       </div> 
     <div class="btn-box"> 
      <button type="button" class="cancelsub" >New Action</button> 
      <button type="submit" class="createbtnsub">Show Options</button> 
     </div> 



     </div> 

      {{/each}}                                    
     </div> 
     </div> 
    </template> 

    <template name="actioncardsubcontent"> 

     <div class="subcontent" id={{_id}} > 

       <div class="modulepath"><div>{{module_list}}</div></div> 
      <div class="linkto"><div>Linked To: &nbsp;<div class="linkto-color">{{link}}</div></div></div> 
      <div class="description"><div>Notes:<br>{{description}}</div></div> 
       <div class="btn-box showoption"> 
      <button type="button" class="hideoption">Hide Options</button> 
      <button type="submit" class="requestextension">Request Extension</button> 

     </div> 



     </div> 


    </template> 

    <template name="requestextensioncard" id={{_id}}> 

     <div class="reqext"> 

      <fieldset class="form-group"> 
       <div class="request-title">Request Extension:</div><br> 
      <textarea class="form-control" id="skills" name="description" placeholder="Description" required style="height: 100px;"></textarea> 
     </fieldset> 
     <fieldset class="form-group"> 
      <select class="form-control m-b" name="lengthOfExt" required> 
       <option value="" selected="selected">Enter length of request </option> 
             <option>One Day</option> 


      </select> 
     </fieldset> 
    <div class="btn-box requestcard"> 
      <button type="button" class="cancelrequest">Cancel Request</button> 
      <button type="submit" class="submitrequest">Submit Request</button> 
     </div> 


     </div> 

     </template> 

和JS：

"click .createbtnsub" : function() { 

     $('#'+this._id).show(); 

} 

"click .requestextension" : function(){ 

     $('#'+this._id).show(); 
} 

我想显示{{> actioncardsubcontent}}的 “显示选项” 按钮移到的点击。并在点击“请求扩展”按钮时显示{{>请求扩展}}模板。 我试图通过给这两个模板动态ID，但它与一个模板工作正常，但没有为其他采取同样的ID为两者。

Answer 1

我不确定它是否会起作用，但仍然可以试一试。

相反的$('#'+this._id).show();，你可以简单地通过$(this).show()

也可以尝试看不出this_id财产。可能你只参考了id。

Answer 2

而不是使用$(selector)来获取元素，请使用this.$(selector)。不同之处在于第二个只能找到模板实例中包含的元素。它提到了here。

现在试试这个代码：

HTML：

<template name="workflow"> 
    <div id="newActionCard"> 
    {{#each newaction}} 
     {{> workflowcard}} 
    {{/each}} 
    </div> 
</template> 

<template name="workflowcard"> 
    <div class="workflowcard"> 
    <div class="module-card-small"> 
     <div class="res-border"></div> 
     <div class="card-img">{{team}}</div> 
     <div class="res-content"> 
     <div class=" newaction-name">{{action_title}}</div> 
     <hr> 
     <div class="newaction-des">{{description}}</div> 
     </div> 
     <div class="due"> 
     Due on: 
     <div> 
      <div class="day-stamp">{{weekday d_date}}</div> 
      <div class="date-stamp">{{date d_date}}</div> 
      <div class="month-stamp">{{month d_date}}</div> 
     </div> 
     </div> 
     {{> actioncardsubcontent}} 
     {{> requestextensioncard}} 
    </div> 
    <div class="btn-box"> 
     <button type="button" class="cancelsub">New Action</button> 
     <button type="submit" class="createbtnsub">Show Options</button> 
    </div> 
    </div> 
</template> 

<template name="actioncardsubcontent"> 
    <div class="subcontent"> 
    <div class="modulepath"> 
     <div>{{module_list}}</div> 
    </div> 
    <div class="linkto"> 
     <div>Linked To: &nbsp; 
      <div class="linkto-color">{{link}}</div> 
     </div> 
    </div> 
    <div class="description"> 
     <div>Notes:<br>{{description}}</div> 
    </div> 
    <div class="btn-box showoption"> 
     <button type="button" class="hideoption">Hide Options</button> 
     <button type="submit" class="requestextension">Request Extension</button> 

    </div> 
    </div> 
</template> 

<template name="requestextensioncard"> 
    <div class="reqext"> 
    <fieldset class="form-group"> 
     <div class="request-title">Request Extension:</div><br> 
     <textarea class="form-control" name="description" placeholder="Description" required style="height: 100px;"></textarea> 
    </fieldset> 
    <fieldset class="form-group"> 
     <select class="form-control m-b" name="lengthOfExt" required> 
      <option value="" selected="selected">Enter length of request </option> 
      <option>One Day</option> 
     </select> 
    </fieldset> 
    <div class="btn-box requestcard"> 
     <button type="button" class="cancelrequest">Cancel Request</button> 
     <button type="submit" class="submitrequest">Submit Request</button> 
    </div> 
    </div> 
</template> 

JS：

Template.workflowcard.events({ 
    'click .createbtnsub': function() { 
    this.$('.subcontent').show(); 
    }, 
    'click .requestextension': function() { 
    this.$('.reqext').show(); 
    } 
});