在流星中生成动态事件模板

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。