Multilevel push-menu in meteor

help
1

i am trying to explore meteor with multi level push menu from http://tympanus.net/Development/MultiLevelPushMenu/ …

the scenario is simple, so i have navigation menu (ex : Home, About Me, etc) on the left side and a container in right side. when i click the navigation menu, i want to show a template in my container side.

Just an example if i click “Home” in my navigation menu, then the container side will display Home Template. or if i click “About Me” menu, then the container side will display AboutMe Template.

i want to make it with a reactive menu using meteor session.

i cant give all my code here because its too long, so here is my essential code

.html:

<template name="MainTemplate">
    <div class="container">
        <div class="mp-pusher" id="mp-pusher">
            <h2 style="margin-left: 20px"><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></h2>
            <!-- mp-menu -->
            <nav id="mp-menu" class="mp-menu">
                <div class="mp-level">
                    <ul>
                        <li><a class="icon icon-shop" href="/MainTemplate">Home</a></li>
                        <li><a class="icon icon-search" href="#" id="ViewGrid">View in Grid</a></li>
                    </ul>
                </div>
            </nav>
            <!-- /mp-menu -->

            {{>scroller}}

        </div><!-- /pusher -->
    </div><!-- /container -->
</template>

<template name="scroller">
    <div class="scroller"><!-- this is for emulating position fixed of the nav -->
        <div class="scroller-inner">

            {{#if currentViewIs "GridHeroes"}}
                {{>GridHeroes}}
            {{else}}
                {{>logo}}
            {{/if}}

        </div><!-- /scroller-inner -->
    </div><!-- /scroller -->
</template>

<template name="logo">
    <div>
        <img src="../marveldc.jpg"/>
    </div>
</template>

.js :

Template.scroller.currentViewIs = function(view) {
        if(Session.get('currentView') == view)
            return true;
        return false;
    };

    Template.MainTemplate.events() ({
        'click #ViewGrid':function(event, template){
            alert('ab');
            Session.set('currentView', 'GridHeroes');
        }
    });

My problem is when i click the link on navigation menu, it cannot render a new template in container side. even my alert cant show too.

any idea how to make it work ?

sorry for my bad explanation.

thanks

2

Change this to: Template.MainTemplate.events({

3

I am not an expert (I still need to try it for first time) , but Iron Router is ment exactly to do that with yelds and regions. Anybody, correct me if I am wrong.

4

Yeah, that’s a big part of what Iron router (and other routers) do, however there are times when you don’t want or need the router.

5

And of course (maybe the most potential and easiest way of meteor for creativity): conditional IF in a template. If a session variable changes, whatever template monitoring it will re-render.

6

Hi Scmart,

thanks for your help…what is the different between events() and events({

btw, my problem already solved with your help and some modification…

7

My problem is solve now… i took scmart advice and do some random lucky modification in MainTemplate…

i was thinking that maybe the list in <ul> is not a part of MainTemplate because of css. so i decided to seperate it from MainTemplate and put it into new template.

my html code became like this

<template name="MainTemplate">
    <div class="container">
        <!-- Push Wrapper -->
        <div class="mp-pusher" id="mp-pusher">
            <h2 style="margin-left: 20px"><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></h2>
            <!-- mp-menu -->
            <nav id="mp-menu" class="mp-menu">
                <div class="mp-level">
                    <h2 class="icon icon-star">All Categories</h2>
                    {{>test}}
                </div>
            </nav>
            <!-- /mp-menu -->
            {{>scroller}}

        </div><!-- /pusher -->
    </div><!-- /container -->
</template>

<template name="test">
    <ul>
          <li><a class="icon icon-shop" href="/MainTemplate">Home</a></li>
          <li><a class="icon icon-search" href="#" id="ViewGrid">View in Grid</a></li>
    </ul>
</template>

JS

 Template.test.events ({
        'click .icon-search':function(event,template){
            alert('ab');
            Session.set('currentView', 'GridHeroes');
        }
    });

actually, i still dont know why it suddenly works :smile:

do you guys have any idea why when i seperate <ul> from MainTemplate it works

1 Like
8

which one do you prefer ? using conditional IF in a template ? or iron router ? give the reason why…

9

I am about to program such things in Meteor for first time, so not experimented yet. But in my understanding: At the router level, not hard coded in several templates of the same thing, the router can define the data context and even the template used.

But for a changing template (such as an acordeon opening depending on a variable state, I would put it in a IF in the template if the different templates are a different display of the same functional thing in the application, so when you look at template code, you have the whole picture of its behavior, rather than spread across several templates.

If the templates relate to different functional elements of the site, I would go Router side also because you can at the same time select data context for it, outside of templates so templates do not hard code data context.

The great thing I understand about the router is that we can make templates that are more one-template-fits-all. (especially multilingual)

10

I’d like to make my sidebar perform navigation like this too. Are you doing the Demo 2: Covering levels? Will you post a repo with an example?

Thanks

11

Hi aadams,

sorry, i still dont get it what you mean by “doing the Demo 2: Covering levels?” and the “repo” too :sweat:

do you mean you want the full code of this multi level menu example ? yes i will post it soon in august :smile:

12

Sorry, in the link you provided, there are 3 options for multi-level push menus, each with a Demo. The second Demo is named ‘Covering levels’. To me it seems the best option and I’d love to build something like this into my application.

I was wondering which method you were implementing and if you had code to share to get me started building something like this into my Meteor application. :smile:

13

hi aadams,

sorry for my late reply… i used the third… btw you can check Exploring Meteor with multi level push menu to get to know more detail about multi level push menu.

since i dont know how to use github, if you want the full code you can pm me your email.