wie mit mehreren dynamischen IDs in einer einzigen Vorlage arbeiten

Question

Ich habe eine Karte mit Schaltflächen, dynamisch generieren nach dem Absenden Formular. Ich möchte den Inhalt auf Knopfdruck auf der Karte mit Schaltflächen anzeigen. Und der gleiche Prozess zum nächsten Schritt, wenn ich auf getoggte Schaltflächen klicke.

Mein Problem ist sagen wir habe 2 Karten (Card1 und Card2). Wenn ich auf die Knöpfe der 1. Karte klicke, gilt die Klickfunktion für beide Karten. Aber es sollte für Karte 1 gelten. Das ist das Problem, vor dem ich stehe. Kann mir jemand helfen?

Hier ist mein Code:

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

und JS:

"click .createbtnsub" : function() { 

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

} 

"click .requestextension" : function(){ 

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

I {{> actioncardsubcontent}} auf Klick auf "Optionen anzeigen" buttton angezeigt werden sollen. und müssen die Vorlage {{> Erweiterung beantragen}} bei Klick auf die Schaltfläche "Anfrageerweiterung" anzeigen. Ich habe versucht, indem ich dynamische ID zu den beiden Vorlagen, aber es funktioniert gut mit einer Vorlage, aber nicht für andere die gleiche ID für beide nehmen.

Answer 1

Ich bin mir nicht sicher, ob es funktioniert oder nicht, aber immer noch können Sie es versuchen.

Statt $('#'+this._id).show();, können Sie einfach versuchen, $(this).show()

auch nicht _id Eigenschaft in this sehen konnte. Möglicherweise verweisen Sie nur auf id.

Answer 2

Anstatt $(selector) zu verwenden, um das Element zu erhalten, verwenden Sie this.$(selector). Das andere ist, dass die zweite nur Elemente findet, die in Ihrer Vorlageninstanz enthalten sind. Es wird here erwähnt.

versuchen nun diesen Code:

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(); 
    } 
});