blueren blueren - 1 year ago 111
Javascript Question

Jquery (metis-menu) not working with iron:router in meteor

I'm trying to implement a sidebar (leveraging the sidebar from sb-admin-2When I use the side bar as part of main.html, the toggles work perfectly fine. However, when I implement the same via iron:router and set the sidebar to be persistent, the sidebar loses the toggle/hide functionality. basically, the child level elements are always expanded and I have no means to hide those child level elements. Is there a work around to this?

I've the side bar code here in pastie --> This works when in client/main.html

But when I try the same from within a template such as this and pass it to iron:router via the below code, the toggle functionality is lost


layoutTemplate: 'sidebar'

I read in this similar question that this has something to do with rendered callback but I'm not sure how I can get it to work here.

Answer Source

This is how I resolved it.


<template name="Index">
    <div id="wrapper">
        <!-- Navigation -->
        {{> navigationBar}}
        {{> Sidebar}}
        <div id="page-wrapper">
            <div class="row breadcrumbPosition">
                {{> breadcrumb}}
            <!-- /.row -->
            <div class="row">
                <div class="col-xs-9 blockablelockable">
                    {{> yield}}
        <!-- /#page-wrapper -->
    <!-- /#wrapper -->

Sidbar.html is a template with the original sidebar implementation.

SidebarHelper.js contains an functino in onRendered which initializes the metis menu like so:

Template.Sidebar.onRendered( function(){

      toggle: true // disable the auto collapse. Default: true.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download