[solved] Template.subscriptionsReady inside helper?

I’m learning template-level subs now and after introducing Template.subscriptionsReady my code has broken.
I have this Jade markup:

if Template.subscriptionsReady
 	div.ui.dropdown Choose smth..

And I use Semantic-UI, which needs to activate the dropdown first for it to actually show some items; this used to work alright:

Template.addPost.onRendered ->
	$('.ui.dropdown').dropdown()

But now it’s broken due to the changed load order:

1.Template.addPost is rendered
2.$(’.ui.dropdown’).dropdown() is called but doesn’t find div.ui.dropdown
3.subscription gets ready
4.div.ui.dropdown is rendered but not activated

So how can wait for subscription to get ready and then manipulate DOM elements?

Try to wrap your li by a template that handle the subscription. Doing this will guarantee that when the DOM part you are interested is rendered the subscriptions are already done.

Something like:

<template name="outer">
{{#if Template.subscriptionsReady}}
   {{> inner}}
{{/if}}
</template>

<template name="inner">
 <!-- whatever you want to display -->
</template>

And then handle whatever you want to do in the DOM in the inner onRendered callback.

Template.inner.onRendered(function() {
   $('.ui.dropdown').dropdown();
   ...
});
1 Like

mmm… thank you, that should work.
But feels a bit like hitting a fly with a cannon.
Maybe there’s another way?..

There’s an elegant hard-to-guess solution.