i trying use materialize meteor, , have hit bump on how initialize materialize javascript, when adding/removing emelents dom.
usecase simple - navbar contains login/register functions when user has not logged in, when logged in, there dropdown (that requires separate initialization) containing sign out. rendered on template gets called once, after second login/logout dropdown stops working.
template._header.onrendered(function(){ console.log('onrendered'); $(".dropdown-button").dropdown(); }); and html part
<template name="_header"> <!-- dropdown structure --> <ul id="dropdown1" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!" data-action="logout"><i class="fa fa-lock left"></i>sign out</a></li> </ul> <nav class="light-blue" role="navigation"> <div class="nav-wrapper"> <a href="#!" class="brand-logo">logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a class="clicker" href="#!">clicker</a></li> {{#if currentuser}} <li><a href="{{ pathfor 'welcome' }}">welcome</a></li> <!-- dropdown trigger --> <li><a class="dropdown-button" href="#!" data-activates="dropdown1">dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li> {{else}} <li><a href="{{ pathfor 'atsignin' }}">sign in</a></li> <li><a href="{{ pathfor 'atsignup' }}">register</a></li> {{/if}} </ul> </div> </nav> </template> i have read many questions here , posts in other parts of interwebs, don't understand how emulate template.updated style callback, called every time element added, removed or changed within template. ideas?
update: there very similar question out there. problem there has different circumstances, solution same - have element in separate template.
looks way to wrap added/removed element in own nested template, , listening onrendered there. (as stipulated in comment)
now have rewritten code this:
template._header_dropdown.onrendered(function(){ console.log('onrendereddropdown'); $(".dropdown-button").dropdown(); }); with html part
<template name="_header"> <nav class="light-blue" role="navigation"> <div class="nav-wrapper"> <a href="#!" class="brand-logo">logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a class="clicker" href="#!">clicker</a></li> {{#if currentuser}} <li><a href="{{ pathfor 'welcome' }}">welcome</a></li> <li><a href="{{ pathfor 'main' }}">main</a></li> <!-- dropdown trigger --> {{> _header_dropdown}} {{else}} <li><a href="{{ pathfor 'atsignin' }}">sign in</a></li> <li><a href="{{ pathfor 'atsignup' }}">register</a></li> {{/if}} </ul> </div> </nav> </template> <template name="_header_dropdown"> <!-- dropdown structure --> <ul id="dropdown1" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!" data-action="logout"><i class="fa fa-lock left"></i>sign out</a></li> </ul> <li><a class="dropdown-button" href="#!" data-activates="dropdown1">dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li> </template> and works. not neat solution, still lot better many other leads had googled. everybody
