Meteor: Dynamic Data Context Switching in Blaze Templates


I had a situation where I needed to load a <select> element on a form from one of two different collections.  The solution I used was one making use of a Session variable, as well as a registered method to use in the template.  Below is an example:

Problem:

Depending on the selection of a user, I want to load the <select> element on a form from one of two different collections.

Description:

The user makes a selection from an inline set of radio buttons.  Clicking a radio button changes the contents of a Session variable that is then used in a helper method to load the desired database.  At the template level, I need to switch the <option> content being displayed, based on the database that was loaded.

Set up:
The two database collections being used are: students and, courses
The Session variable that will choose which: dc

When the user clicks the radio button corresponding with students, the Session variable is set accordingly:

Session.set( 'dc', 'students' );

When the user clicks the radio button corresponding with courses, again, the Session variable is set:

Session.set( 'dc', 'courses' );

In the helper, the value of the Session variable is used to switch between the collections:


cntx(){
...
    try {
      if ( Session.get( 'dc' ) == 'students' ) {
        return Students.find({ company_id: Meteor.user().profile.company_id }).fetch();
      } else if ( Session.get( 'dc' ) == 'departments' ) {
        return Departments.find({ company_id: Meteor.user().profile.company_id }).fetch();
      }
...

A Template.registerHelper is needed:


Template.registerHelper( 'or', ( a, b  ) => {
  return a || b;
});

So that in the Template, I can choose which field to display, based on the value of the Session variable, dc.
The students collections has the field: fullName. The courses collection has the field: name.

The relevant portion of the Template looks like this:


...
<select>
  {{#each cntx}}
    <option selected="{{selected event.type _id }}" 
            value="{{_id}}">
      {{or name fullName}}
    </option>
  {{/each}}
...

Code Description:

In the Template.xxx.helpers function, cntx(), I get the current value of the Session variable, dc, and based on it’s value, I load one of the two collections and return its results as an array to the template.

In the actual template, inside the <select>’s <option> elements, I iterate on the template helper cntx, and for each value, I display either the name field (in the case of the course collection) or the fullName field (in the case of the students collection).

So by following the above technique, it is possible to switch the data context dynamically in a Meteor Blaze Template.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s