Meteor.js scope issues

Question

I am doing most of my coding in [appname].js at the root, and some third party libraries in app/client/compatibility

I am able to load these libraries, and declare and instantiate objects from them in my Template.template1.rendered handler, which works great.

However, when I want to modify one of the variables in Template.template2.events , specifically the event when a selector is changed. When I try to change it from here it tells me my variable is undefined.

I have tried declaring the variable at the top of the file, in isClient , but that doesn't seem to matter. There is no scenario where it is defined there.

So my question is how can I modify this variable in my Template.template2.events ?

var something;

if ( Meteor.isClient ) {

  function doSomething(some, value) {
    some.property = value;
  }

  Template.template1.rendered = function() {
    if(!this._rendered) {
      this._rendered = true;
      this.something= thirdParty.Create();
      doSomething(this.something, document.getElementById("text").value);
    }
  }

  Template.template2.events({
    "change select" : function( event ) {
      doSomething(this.something, input );
    }
  });

The something in the doSomething function says undefined when called from my change select event.

Answer 1

I don't believe the issue is one of scope but of context. In your rendered function (you should now use the onRendered() callback) the value of this is set to the template instance that is being rendered: http://docs.meteor.com/#/full/template_onRendered

On the other hand, in your template events (and helpers), the value of this is set to the data context - not the template object. You can, however, access the template instance as this is passed as the second argument to your event map function: http://docs.meteor.com/#/full/eventmaps

It isn't entirely clear what scope you want in your code. However, your current code includes:

var imageViewer;

The above is declared in the local file scope (but can be closed over)

Template.ocr_results.rendered = function() {
  this.imageViewer = thirdParty.Create();
}

The above is declared as a property of the template instance just rendered (an instance of ocr_results).

Template.ocr_form.events({
  "change select" : function( event ) {
    changeImage(this.imageViewer, input );
  }
});

The above reference to this.imageViewer is undefined for two reasons. First, this is the data context, not the template instance. Second, even if you wrote the below code to use the template instance, it would refer to the ocr_form template instance, not the ocr_results template instance (which is where you have defined it in the second block of code above.

Template.ocr_form.events({
  "change select" : function(event, template) {
    changeImage(template.imageViewer, input );
  }
});

The above still would be undefined.

As @Curtis has suggested, you should probably remove both your this. prefixes to get your code working but creating and using the (closed over) variable just once may not be what you're after - hence the lengthy explanation!