Как работать с несколькими динамическими идентификаторами в одном шаблоне

Question

У меня есть карта с кнопками, динамически генерирующаяся после отправки формы. Я хочу отображать контент нажатием кнопки на карточке с переключением кнопок. И тот же процесс на следующий шаг, когда я нажимаю на переключаемые кнопки.

Моя проблема заключается в том, что у меня есть 2 карты (Card1 и card2). Когда я нажимаю кнопки 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(); 
} 

Я хочу, чтобы отобразить {{> actioncardsubcontent}} на щелчку "Показать параметры" buttton. и необходимо отобразить шаблон {{> request extension}} при нажатии кнопки «Запрос на удаление». Я попытался предоставить динамический идентификатор обоим шаблонам, но он отлично работает с одним шаблоном, но не для другого, принимающего одинаковый идентификатор для обоих.

Answer 1

Я не уверен, будет ли это работать или нет, но вы можете попробовать.

Вместо $('#'+this._id).show();, Вы можете просто попробовать на $(this).show()

Также не могли видеть _id недвижимости в this. Возможно, вы ссылаетесь только на 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(); 
    } 
});