jquery - Meteor with Semantic UI dropdown behavior not working -
i trying integrate semantic ui app. visual styling displaying fine. however, behaviors not appear working , not able raise form of exceptions in console debugging.
- i created meteor test app @ https://github.com/andersr/semantic-test
- i not see exceptions in console , not sure how troubleshoot this. suggestions appreciated.
some relevant code snippets:
markup user nav dropdown:
<div class="ui dropdown link item"> {{currentuser.name}} <i class="dropdown icon"></i> <div class="menu"> <a class="item">sign out</a> </div> </div>
custom.semantic.json file:
{ "definitions": { ... "dropdown": true, ... }
}
invoking dropdown in /client/client.js (though not sure if needed):
$('.dropdown').dropdown({ transition: 'drop' });
jquery
plugins need initalized when corresponding html elements have been inserted in dom, case in standard server side rendered webapps, meteor takes different approach using client side reactive templating, html generation done in browser.
this why need initialize jquery
plugins when meteor has done inserting dropdown in document, can use template onrendered
lifecycle event detect when can safely activate widget behavior.
js
template.dropdown.onrendered(function(){ this.$(".dropdown").dropdown(); });
html
<template name="dropdown"> <div class="ui dropdown link item"> {{currentuser.name}} <i class="dropdown icon"></i> <div class="menu"> <a class="item">sign out</a> </div> </div> </template>
Comments
Post a Comment