Javascript / meteor android return objects to temp

Question

I have the following piece of code in my meteor app

if (Meteor.isClient) {
  Meteor.startup(function(){

    var onSuccess = function(acceleration){
      alert( acceleration);
    };

    var onError = function(acceleration){
      return "error";
    }

    var options = { frequency: 3000 };  // Update every 3 seconds

    var getAcc = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

  });
}

What that does is retrieve the android phones accelerometer data every 3 seconds, and on a successful poll it will show the object in an alert. This works fine.

However, I don't want this polling code to be in the startup function. I want to have more control over when this is executed

I have a template where I want to display the accelerometer values. I changed the onSuccess method in the code above to return the object instead of alerting (the rest of the startup code is the same):

var onSuccess = function(acceleration){
      return acceleration;
    };

My template looks like this:

Template.rawData.helpers({
    acc: function(){
      alert(getAcc);
      return getAcc;
    }
  });

What I'm expecting to happen is for the accelerometer data to be stored in getAcc in the startup function, but then to return it through acc to my webpage. This does not seem to happen. The alert in the template doesn't occur either

Is there a way to access these cordova plugins from outside of the startup function? Am I just incorrectly returning the objects between the startup and template sections?

I guess my other overarching question is this: I'm not sure how to display those accelerometer values through a template if theyre gathered in the startup function, and not from a template helper

Answer 1

You need to have the template update reactively when the data changes. To do that set up a reactive variable that gets updated by the callback. First, install the package:

meteor add reactive-var

Then, when the template is created, create the reactive variable and start watching the callbacks:

Template.rawData.onCreated(function() {
   self = this;
   self.rawValue = new ReactiveVar();
   self.accWatchID = navigator.accelerometer.watchAcceleration(
      function(acc) { self.rawValue.set(acc); }, function() {}, { frequency: 3000 }
   );
});

Your template helper can then return the value of the reactive variable, and your template will be updated whenever it changes:

Template.rawData.helpers({
   acc: function() {
      return Template.instance().rawValue.get();
    }
 });

(Note that in your original code, since the alert wasn't being called, there must be a problem in your template. Does it have the right name?)

Finally, you should stop the callback when the template is destroyed:

Template.rawData.onDestroyed(function() {
   navigator.accelerometer.clearWatch(this.accWatchID);
});

Note that I've just typed that code here without testing it. You may need to fine tune it a little if it doesn't work straight away.