1つのテンプレートに複数の動的IDを使用する方法

Question

フォームを送信した後に動的に生成されるボタン付きのカードがあります。ボタントグルでカードのボタンをクリックするとその内容が表示されます。トグルされたボタンをクリックすると、次のステップと同じプロセスが実行されます。

私の問題は、私は2枚のカード（カード1とカード2）を持っていると言うことができます。 1枚目のカードのボタンをクリックすると、両方のカードにクリック機能が適用されます。しかし、それはカード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(); 
} 

私は "ショーのオプション" butttonのクリックで{{> actioncardsubcontent}}を表示したいです。 「Extenion」ボタンをクリックすると{{request extension}}テンプレートが表示されます。 私は両方のテンプレートに動的IDを与えてみましたが、1つのテンプレートでうまくいきましたが、他のテンプレートでは同じIDをとっていません。

Answer 1

動作するかどうかは分かりませんが、まだ試してみることができます。

代わりの$('#'+this._id).show();、あなたは、単にthisで_idプロパティを見ることができなかった。また$(this).show()

で試すことができます。 idに参照している可能性があります。

Answer 2

$(selector)を使用して要素を取得する代わりに、this.$(selector)を使用してください。異なる点は、2番目の要素はテンプレートインスタンス内に含まれる要素のみを見つけることです。それは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(); 
    } 
});