Using ReactiveArray with Meteor 1.3.x


This caught me, as I hadn’t used ReactiveArray’s for sometime, and found immediately that the way they used to work, no longer does in Meteor 1.3. So this is just a quick example of they they are used now.

The package I’m using is installed as:
 meteor add manuel:reactivearray

Let’s add a couple ReactiveArray‘s to our template:


Template.foo.onCreated(function() {
  this.bar = new ReactiveArray([]);
  this.baz = new ReactiveArray([]);
});

The above instantiates two of them. Note the this in front of their names. By adding them to this, we are adding them to the Template instance. This is important. Now lets use them (from a method inside the Template.foo.helpers):


    let sccp = Students.find({}).fetch()[0];
    if ( sccp && sccp.courses_completed ) {
      var sccpl = sccp.courses_completed.length;
      for ( let i = 0; i < sccpl; i++ ) {
        Template.instance().bar.push( sccp.courses_completed[i].id );
      }
    }

    let scc = Students.find({}).fetch()[0];
    if ( scc && scc.current_courses ) {
      var sccl = scc.current_courses.length;
        for ( let i = 0; i < sccl; i++ ) {
            Template.instance().baz.push( scc.current_courses[i].id );
          }
    }

Pay no mind to the queries, I just put super basic ones in for context.

Look inside the for loops of each if block, that’s the thing to notice. They each start with: Template.instance().

Remember, we defined the ReactiveArray‘s as:  this.bar   and   this.baz   making them instance variables of the Template we’re currently in. So, to get their values, we must   start   at the   Template,   and work our way in. To get a handle to the Template   instance,   we have the   instance()   method call. That gives us our handle. Then we simply reference the property we want, in our case, the two ReactiveArray‘s. After getting ahold of them, we’re pushing data into them with the   Array.push()   method.

Finally, lets use them (also from inside Template.foo.helpers):


  bar() {
    return Template.instance().bar.list();
  },
  baz() {
    return Template.instance().baz.list();
  },

And then from the associated Template, foo.html:


current courses: {{ bar }}
courses completed: {{ bad }}

Notice again, we get the contents of the arrays from   Template.instance().   The   list()   method is one of ReactiveArray‘s member functions.

The take away is:

Hopefully this will be of use.

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