[solved] Run parent function on child template render

help
1

Hi guys!
In my parent tpl I have info circles to which I add .color class in onRendered callback.
After some UI manipulations (eg choosing product category) a child tpl (with product details) is rendered into view. It also has info circles which need to have the same .color class.
Of course, I could add the same function to child tpl’s onRendered cb, but that wouldn’t be very DRY would it?

Q: how can I detect child tpl’s render event in parent tpl and call the same function on this render event? Or maybe you can propose a smarter solution altogether?

1 Like
2

bumpbumpbumpbumpbump this)

3

In Meteor, most of the time, you don’t need onRendered to change the DOM. Here is what I think is the canonical way:

  • Define a reactive data source called “color”. It can be a Sesion variable, or, better, a ReactiveVar defined in your parent template.
  • Define helper(s) to access this reactive data source.
  • In your html, use the helper(s) to set the class.
4

I have a meteorpad that shows this - as @Steve suggests uses a reactive data source and sets the class of already rendered elements and any that are added dynamically…

http://meteorpad.com/pad/2u4Ko5oWyD8432FTF/color

5

well, one example
{{> childTemplate color=parentColor }}

and than in childTemplate helper you can access it as this.color
I am not sure, maybe it affects data context somehow or replace it, test behaviour.
There was something strange happening but I have no time to test why yet.

Or you can bundle it into data context - as mentioned in https://www.discovermeteor.com/blog/meteor-components-template-controller-pattern/
Based on that pattern than you can also call functions defined in parent template in childs

6

Thank you all for this useful knowledge.
@garrilla - big thanks for the idea of global helper :thumbsup: