CODEWITHSUNDEEP
meteor
flimflam57
flimflam57

Reputation: 1334

Initiate a template iteration in Meteor

Rather than loading a new template, is there a way to force Meteor to initiate an iteration (using {{#each}}) of an array in Meteor? For example, if the user selects a value in a pull down selector, to then initiate Meteor to iterate through an array within that template to populate another multiple selector list rather than load a whole new template with the new selector list.

Let's say this is within a template:

 .
 . 
 . 
 <form class="input-field col s6 card-selector">
      <select multiple">
          <option value="" disabled selected>Select Students</option>
          {{#each StudentList1}}
               <option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk1}}</option>
            {{/each}}
        </select>
 </form>
.
.
.

When a user selects a value in a different selector in that template:

<select class="week-selector">
      <option value="" 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>

it will force a reiteration of the first #each to:

<form class="input-field col s6 card-selector">
  <select multiple">
      <option value="" disabled selected>Select Students</option>
      {{#each StudentList1}}
           <option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk2}}</option>
        {{/each}}
    </select>
</form>

It would be more efficient than loading a new template that's the same except for the multi selector values.

Upvotes: 0

Views: 34

Answers (1)

Luna
Luna

Reputation: 1178

Sessions are reactive and you can achieve this by using sessions (check if you have session package). 

//we don't want the session value from the previous search/events
Template.templateName.onRendered(function(){
    Session.set('sessionName', undefined);
});

//I'd probably use onDestroyed instead of onRendered
Template.templateName.onDestroyed(function(){
    Session.set('sessionName', undefined);
});

//template events
'change .week-selector': function(){
    var selected = $('.week-selector').find(":selected").text();
    Session.set('sessionName', selected)
}

//template helper
StudentList1: function(){
    var session = Session.get('sessionName');
    if(session !== undefined){
        //return some documents using the session value in your find()
    } else {
        //return documents without session value
    }
}

EDIT: I found .text() of the selected option in the event but you are free to return value or do whatever you want with the found value/text.

Upvotes: 1

Related Questions