Reactive variables on Meteor - meteor

Question

I've been looking for reactive vars and dependencies on Meteor but I'm facing a problem today with an object.
The goal is to do a stepbar and display the changes once a page is loaded.
I defined an helper Stepbar_helper.js as below :
/**
* stepBar
*
* Stepbar library
*
*/
function StepBar(){
this.stepList = [];
this.curStep = 0; //current step
}
/* architecture of a step
var step = {
status : '',
title : '',
text : ''
}
*/
/**
* addStep
*
* Add a step to the list
*
* #param Array Properties of the step #see _props
*/
StepBar.prototype.addStep = function( properties) {
this.stepList.push(properties);
};
/**
* clear
*
* Clear the list of the steps
*
*/
StepBar.prototype.clear = function() {
this.stepList = [];
};
/**
* next
*
* Jump to the next step
*
*/
StepBar.prototype.next = function() {
if(this.curStep <= this.stepList.length){
this.curStep++;
//change attributes of previous
this.stepList[this.curStep-1].status = 'complete';
//set next to active
this.stepList[this.curStep].status = 'active';
}
};
/**
* getCurrent
*
* Returns the current element of the list
*
* #return Array
*/
StepBar.prototype.getCurrent = function() {
return (this.stepList[this.curStep] !== undefined) ? this.stepList[this.curStep] : null;
};
this.StepBar = new StepBar(); //export
Then I have a template :
<template name="stepbar">
<div class="row bs-wizard" style="border-bottom:0;">
{{#each Steps}}
<div class="col-xs-4 bs-wizard-step {{status}}">
<div class="text-center bs-wizard-stepnum">{{title}}</div>
<div class="progress"><div class="progress-bar"></div></div>
<div class="bs-wizard-info text-center">{{text}}</div>
</div>
{{/each}}
</div>
</template>
And finally I have a stepbar.js file :
//first step
StepBar.addStep({
status : 'active',
title : 'Step 1',
text : 'Propriétés'
});
StepBar.addStep({
status : 'disabled',
title : 'Step 2',
text : 'Paramètres'
});
StepBar.addStep({
status : 'disabled',
title : 'Step 3',
text : 'Aperçu'
});
Template.stepbar.helpers({
Steps: function () {
return StepBar.stepList;
}
});
The stepbar is called in another template, in the latter one when I click on a button I'm calling the method StepBar.next() which moves the current step to the next. However the template is not affected.
My question is where do I need to include Dependencies ? I have honestly no idea where neither how Deps works.
Regards

Answer 1

You can use ReactiveArray to create nicely reactive arrays. Install the package:
meteor add manuel:reactivearray
Then you should be able to replace your array with a ReactiveArray object, this way:
/**
* stepBar
*
* Stepbar library
*
*/
function StepBar(){
this.stepList = new ReactiveArray();
this.curStep = 0; //current step
}
/**
* clear
*
* Clear the list of the steps
*
*/
StepBar.prototype.clear = function() {
this.stepList.clear();
};
Since ReactiveArray behaves just like a normal array, all the rest of your class should work as is with this minor change. (forgive me if I'm wrong)
Then, just make sure you make your helper reactive using the list() method:
Template.stepbar.helpers({
Steps: function () {
return StepBar.stepList.list();
}
});