CODEWITHSUNDEEP
meteor
flimflam57
flimflam57

Reputation: 1334

Meteor helper function not returning changed Session value

I'm not getting the behavior I'm looking for. Say I've got a html template in Meteor called Teacher. It has two selectors, a 'week' selector and a 'sunday-lessons' selector (I've simplified the template somewhat here):

<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>

In this case, {{#each TeacherName}} is returning ONE document since it returns an array with the document of interest in it.

I'm trying to get the behavior such that when the week selector is changed, it grabs the state of certain document properties in the database and inserts them into the sunday selector.

So I set a Session value first when the template renders:

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

Then in the events template I listen for the selector to change:

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

Then in the template helper I create a function that grabs the Session value and returns the value I want:

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

Even if I try to have the function return a primitive:

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

Nothing happens. I'm expecting the 3 to be placed in the sunday-lesson selector at the moment the week selector is changed. I can see the value of the Session change if I put in alert(lessonNum), but the condition statements don't appear to be re-evaluating to return the different value. Not sure where I'm going wrong.

EDIT:

Interesting find. If I place the {{sundayLesson}} OUTSIDE the selector, I can get the reactive 3 value when the Session changes. 

<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>

Upvotes: 1

Views: 50

Answers (1)

flimflam57
flimflam57

Reputation: 1334

The answer was found in the Materialize documentation. In order to update the selector dynamically, I needed to re-initialize the selector like this:

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

Sort of clumsy, but that's the solution.

Upvotes: 0

Related Questions