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

  },
  ...
  ...
});

我无法在模板中插入for循环来生成key：value对，所以我几乎处于停滞状态，因为我可以像这样生成动态事件模板。

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。

在Meteor中生成动态事件模板

1 个答案: