Question

我没有得到我正在寻找的行为。假设我在Meteor中有一个名为Teacher的html模板。它有两个选择器，一个'周'选择器和一个'星期日课程'选择器（我在这里稍微简化了模板）：

<template name="Teacher">
  {{#each TeacherName}}
    <div class="row">
      <div class="input-field col s2 fullModal">
        <select class="teacher-week-selector" id="week-selector">
          <option value="Off" disabled selected>Week</option>
          <option value="Week1">Week 1</option>
          <option value="Week2">Week 2</option>
          <option value="Week3">Week 3</option>
          <option value="Week4">Week 4</option>
          <option value="Week5">Week 5</option>
        </select>
      </div>
    </div>
  <div class="row">
    <div class="input-field col s1 fullModal">
      <select id="sunday-lessons">
        <option value="Off" disabled selected>{{sundayLesson}}</option>
        <option value=1>1</option>
        <option value=2>2</option>
        <option value=3>3</option>
        <option value=4>4</option>
        <option value=5>5</option>
        <option value=6>6</option>
      </select><label>SUN</label>
    </div>
  </div>
{{/each}}
</template>

在这种情况下，{{#each TeacherName}}返回一个文档，因为它返回一个包含感兴趣文档的数组。

我正在尝试获取这样的行为：当更改周选择器时，它会抓取数据库中某些文档属性的状态并将它们插入到星期日选择器中。

所以我在模板渲染时首先设置一个Session值：

Template.Teacher.onRendered(function () {
  Session.set('WeekNumber', undefined);
});

然后在事件模板中，我听取选择器的更改：

Template.Teacher.events({
  'change #week-selector': function(){
    var sselect = document.getElementById('week-selector').value;
    Session.set('WeekNumber', sselect);
  }
});

然后在模板助手中创建一个抓取Session值并返回我想要的值的函数：

Template.Teacher.helpers({
  sundayLesson: function () {
    var lessonNum = Session.get('WeekNumber');
    if (lessonNum === "Week1")
      return Lessons.Week1.Sunday;
    else if (lessonNum === "Week2")
      return Lessons.Week2.Sunday;
    else if (lessonNum === "Week3")
      return Lessons.Week3.Sunday;
    else if (lessonNum === "Week4")
      return Lessons.Week4.Sunday;
    else if (lessonNum === "Week5")
      return Lessons.Week5.Sunday;
  }
});

即使我尝试让函数返回一个原语：

if (lessonNum === "Week1")
      return 3;

什么都没发生。我希望在星期选择器改变的那一刻将3放在星期日课程选择器中。如果我输入alert（lessonNum），我可以看到Session更改的值，但条件语句似乎没有重新评估以返回不同的值。不知道我哪里出错了。

编辑：

有趣的发现。如果我将{{sundayLesson}}放在选择器外面，我可以在Session更改时获得响应3值。

<p>{{sundayLesson}}</p> <!-- this works -->
<select id="sunday-lessons">
    <option value="Off" disabled selected>{{sundayLesson}}</option> <!-- Doesn't work -->
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
  </select><label>SUN</label>

Answer 1

答案在Materialise文档中找到。为了动态更新选择器，我需要重新初始化选择器，如下所示：

 Template.Teacher.helpers({
   sundayLesson: function () {
     var lessonNum = Session.get('WeekNumber');
     if (lessonNum === "Week1") {
       $('select').material_select();
       return Lessons.Week1.Sunday;
     }
     else if (lessonNum === "Week2") {
       $('select').material_select();
       return Lessons.Week2.Sunday;
     }
     else if (lessonNum === "Week3") {
       $('select').material_select();
       return Lessons.Week3.Sunday;
     }
     else if (lessonNum === "Week4") {
       $('select').material_select();
       return Lessons.Week4.Sunday;
     }
     else if (lessonNum === "Week5") {
       $('select').material_select();
       return Lessons.Week5.Sunday;
     } 
  }
});

有点笨拙，但这就是解决方案。

Meteor辅助函数未返回更改的会话值

1 个答案: