動的ボタンをクリックしてメテオの機能を表示します。

Question

フォームの送信後に動的に生成されたカードにhideとshowの機能があります。

{{#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}} 
       </div> 
    <div class="btn-box"> 
     <button type="button" class="cancelsub">Hide Option</button> 
     <button type="submit" class="createbtnsub">Show Options</button> 
    </div> 

    </div> 

      </div> 

       {{/each}}                                    
     </div> 
    </div> 

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

    </template> 

私はショーのオプションボタンをクリックします

は、アクションカードサブコンテンツが表示され、私は非表示オプションをクリックしたときに隠れています。 問題は、1枚のカードをクリックすると、一度に動的に作成されているすべてのカードにhideとshowの機能が適用されていることです。私はボタンのクラス名を与えた理由が分かります。どのようにそれを停止し、現在のターゲットに動作させる。ここで

は私のJSです：

Template.actioncardsubcontent.rendered = function(){ 
    this.$(".subcontent").hide(); 
}; 

Template.workflow.events({ 
"click .createbtnsub":function(){ 
$('.subcontent').show(); 
}, 
"click .cancelsub":function(){ 
$('.subcontent').hide(); 
} 

Answer 1

あなたがする必要がどのようなあなたのカードのdivのクラス属性に各反復のためのユニークなIDを与えています。

（JSTL内）には、通常、indexId属性があります。あなたはそれを使用してクラスを設定することができます。

サンプル：あなたのJavaScriptで

{{#each newaction indexId="i"}} 
{{/each}} 

    <div class="btn-box"> 
     <button type="button" class="cancelsub<%=i%>">Hide Option</button> 
     <button type="submit" class="createbtnsub<%=i%>">Show Options</button> 
    </div> 

：私は非表示に

使用。

Answer 2

ここには2つのオプションがあります。私が好むのは、{{#each}}のすべてを独自のテンプレートに入れることです。これを行うと、子テンプレートのイベント内にボタンのクリックイベントを配置して、データを操作するのがはるかに簡単になります。例：

テンプレート：

<template name='workflow'> 
    {{#each newaction}} 
     {{> card}} 
    {{/each}} 
</template> 

<template name='card'> 
    <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}} 
     </div> 

     <div class="btn-box"> 
      <button type="button" class="cancelsub">Hide Option</button> 
      <button type="submit" class="createbtnsub">Show Options</button> 
     </div> 
     </div> 
    </div> 
</template> 

のJavascript（template.$ docs）：

Template.cards.events({ 
    "click .createbtnsub":function(event, template){ 
     template.$('.subcontent').show(); 
    }, 
    "click .cancelsub":function(event, template){ 
     template.$('.subcontent').hide(); 
    } 
}); 

- OR -

あなたはより良いDOMのクエリを行うことができます。

実際にactioncardsubcontentテンプレートに記載されているものや適切なテストに関する情報がないと、これはあなたが探しているものを推測するのに最適です。あなたは試行錯誤を通して、あなたの特定のニーズを十分に満たすためにこのクエリを微調整することができます。 jQuery Traversing docsを読んでください。少しクリアする必要があります。

Template. workflow.events({ 
    "click .createbtnsub":function(event, template){ 
     $(event.target).siblings('.due').find('.subcontent').show(); 
    }, 
    "click .cancelsub":function(event, template){ 
     $(event.target).siblings('.due').find('.subcontent').hide(); 
    } 
});