meteormeteor-blazemeteor-helper

How do I access the data context and the template instance in each case (event, helper, hook)?


My brain is hurting because of all the inconsistency. Please have a look at the code below and correct/complete it:

Template.Example.events({
  'click #example': function(event, template) {
    instance = template; // or = Template.instance();
    instance_reactive_data_context = template.currentData(); // or = Template.currentData();
    instance_nonreactive_data_context = ???
    event_data_context = event.currentTarget;
});

Template.Example.helpers({
  example: function() {
    instance = Template.instance();
    instance_reactive_data_context = this; // or = Template.currentData();
    instance_nonreactive_data_context = ???
  }
});

Template.Example.onCreated(function () {
  instance = this;
  instance_reactive_data_context = this.currentData();
  instance_nonreactive_data_context = this.data;
});

Solution

  • Here's the answer, which even shows a bit more. It includes creating and accessing a reactive-var or reactive-dictionaries attached to the template. All this is extremely important to understand for Meteor developers:

    Template.Example.onCreated(function () {
      instance = this; // or = Template.instance();
      // instance_reactive_data_context = no point in having a reactive data context since this function is only executed once
      instance_nonreactive_data_context = this.data;
      // now in order to attach a reactive variable to the template:
      let varInitialValue = ...
      instance.reactive_variable = new ReactiveVar(varInitialValue);
      // and now let's attach two reactive dictionaries to the template: 
      let dictInitialValue_1 = { ... }
      let dictInitialValue_2 = [ ... ]
      instance.reactive_dictionaries = new ReactiveDict();
      instance.reactive_dictionaries.set('attachedDict_1', dictInitialValue_1);
      instance.reactive_dictionaries.set('attachedDict_2', dictInitialValue_2);
    });
    
    Template.Example.events({
      'click #example': function(event, template) {
        instance = template; // or = Template.instance();
        instance_reactive_data_context = Template.currentData();
        instance_nonreactive_data_context = template.data;
        event_data_context = event.currentTarget;
        // to access or modify the reactive-var attached to the template:
        console.log(template.reactive_variable.get());
        template.reactive_variable.set('new value');
        // to access or modify one of the reactive-dictionaries attached to the template:
        console.log(template.reactive_dictionaries.get('attachedDict_2'));
        template.reactive_dictionaries.set('attachedDict_2', { newkey: 'new value', somearray: ['a', 'b'] });
    });
    
    Template.Example.helpers({
      example: function() {
        instance = Template.instance();
        instance_reactive_data_context = this; // or = Template.currentData();
        // instance_nonreactive_data_context = it can't be accessed as a non-reactive source. When you'll need something like this, most likely because the helper is running too many times, look into the [meteor-computed-field][1] package
        // to access or modify the reactive-var attached to the template:
        console.log(Template.instance().reactive_variable.get());
        Template.instance().reactive_variable.set('new value');
        // to access or modify one of the reactive-dictionaries attached to the template:
        console.log(Template.instance().reactive_dictionaries.get('attachedDict_2'));
        Template.instance().reactive_dictionaries.set('attachedDict_2', 'new value here');
        // obviously since you declared instance on the first line, you'd actually use everywhere "instance." instead of "Template.instance()."
      }
    });