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

Question

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

我的问题是假设我有 2 张卡（卡 1 和卡 2）。当我点击第一张卡片的按钮时，点击功能正在申请两张卡片。但它应该申请卡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();
  }
});