Well that was painful but i think i have a decentish way. A lot of people, I think, have gotten in trouble with semantic-ui and the way it needs you to initialize components in such a way that the onRendered(() => {}) just doesnt do anything. For example, for any template “userProfile” that has a ‘.ui.selection.dropdown.firstName’ element that got rendered in a template inclusion (code further down):
Template.userProfile.onRendered(function () {
$(’.ui.selection.dropdown.firstName’).dropdown();
});
Gets called, but does NOTHING.
The userProfile template looks like this:
<
template name=“userProfile”>{{#if Template.subscriptionsReady}} {{> optionsCombo options=(optionsFor "firstName") }} {{/if}}`<`/template>
Where optionsCombo is a sub-component (as per the guide for Meteor 1.2), where your actual ‘.ui.selection.dropdown.firstName’ element(s) get rendered in its own template.
I moved the call $(’.ui.selection.dropdown.firstName’).dropdown(); to the onRendered of the subcomponent. It gets called fine, but it doesnt do anything… so well, unto the solution. I hacked this way, it works:
Smart Component blaze:
<
template name=“userProfile”>
<
div class=“ui form userprofile”>
{{#if Template.subscriptionsReady}}`{{> optionsCombo options=(optionsFor "firstName") }} {{activateSemanticsFor "firstName"}} {{> optionsCombo options=(optionsFor "lastName")}} {{activateSemanticsFor "lastName"}} {{/if}}
Smart component javascript:
Template.userProfile.helpers({
optionsFor: function (profileFieldName) {
// getsOptionsForFirstNameconst instance=Template.instance(); const ret=[];
return { fieldName: profileFieldName, optionsReady: instance.subscriptionsReady(), optionList:this.profileOptions(profileFieldName) };
}
,
activateSemanticsFor: function (fieldName) {
$(’.ui.selection.dropdown.’+fieldName).dropdown();
}
});
And you can see how this hack could somehow be generalized for sub-component types and kind-of get the ensuing disaster under control.
Anyhow, thought Id share and save some pain.