[Meteor/Blaze] Misunderstanding `each...in` rendering with reactive variable

help
1

Hi! I’m new to Meteor/Blaze but that is what my company is using.

I’ve moved my question to stack-overflow so that it gets more visibility (and so I can edit it depending on the feedback): stackoverflow post.

TL;DR:
I create some children templates from a ReactiveDict array in the parent array. The data is not refreshed in the children templates when the ReactiveDict changes and I don’t understand why.

I probably have misunderstood something. Could you help me out?

2

Without too much analysis of your code, I have the following comment: It’s bad practice to get and set the same reactive variable within a reactive execution context (like a template helper). Try moving your click code out of the helper and into a Template#events block, which is non-reactive and designed to work correctly with Blaze.

If you still have the issue after doing that, post back with your revised code.

3

I can’t do that. The code is not actually in the helper, it is passed as a callback to the child template. It is a bit like the React HoC architecture. The parent template holds all the logic variables and pass them to children.

The add button is in the child. The child only displays data and calls the callback. The parent actually holds the data and handles the logic.

4

Hey @robfallows,

I’ve moved the code on stackoverflow, hopefully the code is more complete.

The onClick function is actually defined out of the Template#helper in the original code, and passed as a callback to the child. The child calls the onClick function in the Template#event.

Is it okay to do that? I don’t see how I could pass the callback in any other way.

Example

In the parent:

Template.parent.helpers({
 childArg(row) {
    const state = Template.instance().state;
    return {
      id: row.id,
      onClick: childCallbacks.onClick.bind(null, state),
    };
  }
});

const childCallbacks = {
  onClick(id) {
    // do stuff;
  }
};

In the child

And in the children the callback is called in Template#event:

Template.child.events({
  'click .add'(event, templateInstance) {
    templateInstance.data.onClick(templateInstance.data.id);
  }
});
5

I managed to fix my code here.

I still don’t understand why the each...in loop behaves that way though.