Meteor 辅助函数不返回更改的会话值答案

【问题标题】：Meteor helper function not returning changed Session valueMeteor 辅助函数不返回更改的会话值
【发布时间】：2016-06-07 08:02:51
【问题描述】：

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

<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);
  }
});

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

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>

【问题讨论】：

请注意，我使用的是 Materialize，选择器是 Materialize 选择器。他们似乎不想响应用户输入 Session 的变化。还在挠头。
到目前为止，我唯一的解决方案是将 {{sundayLesson}} 放在选择器的标签中。

标签： meteor

【解决方案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;
     } 
  }
});

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

【讨论】：