Meteorで動的イベントテンプレートを生成

Question

たとえば、MeteorにMaterializeを使用して複数のカードパネルを生成するテンプレートがあります。重要なアイデアは、各パネル内で固有の値を生成することです。

<template name="Teacher_Information"> 
{{#each TeacherNames}} 
<div class="row"> 
<div class="col s12"> 
    <div class="card blue-grey darken-1"> 
    <div class="card-content white-text"> 
     <a href="#" id="img-{{@index}}"><img src={{formatImage FullName}} alt="" class="circle"></a> 
     <span class="card-title">{{formatName FullName}}</span> 
     <span>Some text here.</span> 
     <span> 
     <form> 
      <input name="dayGroup" type="radio" id="teach-sunday-{{@index}}" value="Sunday"> 
      <label for="teach-sunday-{{@index}}" class="white-text">SU</label> 
      <input name="dayGroup" type="radio" id="teach-monday-{{@index}}" value="Monday"> 
      <label for="teach-monday-{{@index}}" class="white-text">MO</label> 
      <input name="dayGroup" type="radio" id="teach-tuesday-{{@index}}" value="Tuesday"> 
      <label for="teach-tuesday-{{@index}}" class="white-text">TU</label> 
      <input name="dayGroup" type="radio" id="teach-wednesday-{{@index}}" value="Wednesday"> 
      <label for="teach-wednesday-{{@index}}" class="white-text">WE</label> 
      <input name="dayGroup" type="radio" id="teach-thursday-{{@index}}" value="Thursday"> 
      <label for="teach-thursday-{{@index}}" class="white-text">TH</label> 
      <input name="dayGroup" type="radio" id="teach-friday-{{@index}}" value="Friday"> 
      <label for="teach-friday-{{@index}}" class="white-text">FR</label> 
     </form> 
     </span> 
    </div> 
    <div class="card-action white-text"> 
     <form class="input-field col s6 card-selector"> 
     <select multiple id="teacher-students-day1-{{@index}}"> 
      <option value="" disabled selected>Select Students</option> 
      {{#each StudentList1}} 
      <option value= '{{FullName}}'>{{formatName FullName}} ({{Level}})</option> 
      {{/each}} 
     </select> 
     </form> 
     <form class="input-field col s2 card-selector"> 
     <select multiple id="days-off-{{@index}}"> 
      <option value="" disabled selected>Off</option> 
      <option value="Sunday">Su</option> 
      <option value="Monday">Mo</option> 
      <option value="Tuesday">Tu</option> 
      <option value="Wednesday">We</option> 
      <option value="Thursday">Th</option> 
      <option value="Friday">Fr</option> 
      <option value="Saturday">Sa</option> 
     </select> 
     </form> 
    </div> 
    </div> 
    </div> 
</div> 
{{/each}} 
</template> 

「教師の名前」の長さによって、多くのパネルが作成されます。 @index構文を使用して一意の名前を生成します。私はイベントのテンプレートを作成する必要がある場合に

さて、私は必要があると思いことのようになります。、値のペア：

Template.Teacher_Information.events({ 
    'click #img-0': function() { 
    // do some stuff 

    }, 
    'click #image-1': function() { 
    // some more stuff 

    }, 
    ... 
    ... 
}); 

私は鍵を生成するためにテンプレート内のループのために挿入することはできません。だから、私はそれのような動的なイベントテンプレートをどのように生成することができるかについては、かなり止まっている。

Answer 1

これを行うための通常のパターンは、下位レベルでテンプレートを定義してからイベントを追加することです。あなたのケースでは：

<template name="Teacher_Information"> 
{{#each TeacherNames}} 
    {{> oneTeacher}} 
{{/each}} 
</template> 

次に、あなたのoneTeacherテンプレートを使用すると、前{{#each TeacherNames}}ループ内で持っていたすべてのものになります。

今あなたがoneTeacherテンプレートにイベントを添付し、あなたの場合には、教師のデータコンテキストを取得することができます。

Template.oneTeacher.events({ 
    'click a'(ev){ 
    console.log(this); // 'this' will be a teacher object 
    } 
}); 

がこれを理解するには、早期の一つであった「OMG、これはそんなに簡単です！」私が流星を学んでいた瞬間。

あなたはそれでいる間、あなたも、あなたがコードで構築する配列をループで週テンプレートのあなたの日を乾燥させることができる。

Template.oneTeacher.helpers({ 
    dow() { return [ 
    { number: 1, day: "Sunday", abbr: "SU" }, 
    { number: 2, day: "Monday", abbr: "MO" }, 
    { number: 3, day: "Tuesday", abbr: "TU" }, 
    { number: 4, day: "Wednesday", abbr: "WE" }, 
    { number: 5, day: "Thursday", abbr: "TH" }, 
    { number: 6, day: "Friday", abbr: "FR" }, 
    { number: 7, day: "Saturday", abbr: "SA" } 
    ]; 
    } 
}); 

次に、あなたが行うことができます：

<form> 
{{#each dow}} 
    <input name="dayGroup" type="radio" value={{name}}> 
    <label class="white-text">{{abbr}}</label> 
{{/each}} 
</form> 

あなたは最も低いレベルでイベントを処理するときに、すべてのDOMオブジェクトに一意のIDを与える必要はありません。