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.

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -