如何在單個模板中使用多個動態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(); 
    } 
});