在流星中生成動態事件模板

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> 

根據'TeacherNames'的長度，它會創建很多面板。它使用@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。