How to load partial in Meteor using jQuery?

Question

I have this inside my application.html file:

<head>
    ...
</head>

<body>
    {{> nav2}}
        {{> home}}
    {{> footer}}
</body>

And this is my nav2.html:

<template name="nav2">
  ...
  <div id="top_nav_sub_menus"></div>
  ...
</template>

I try to load 2 different nav items inside my nav2 targeting the top_nav_sub_menus element. One is for desktop, one is for mobile.

desktop_nav.html

<template name="desktop_nav">
    <li>
      <a href="#" id="benefits">X</a>
      <ul class="menu vertical benefits_children">
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
      </ul>
    </li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
</template>

mobile_nav.html

<template name="mobile_nav">
    <li><a href="#" id="benefits">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
</template>

Since I'm using detectmobilebrowser.js, I try to do it like this inside my application.js:

if (Meteor.isClient) {
  $(function(){
    if ($.browser.mobile) {
      $("#top_nav_sub_menus").html(Meteor.render(mobile_nav));
    } else {
      $("#top_nav_sub_menus").html(Meteor.render(desktop_nav));      
    }
  })
}

But it doesn't work.

What I've tried and doesn't work:

1 - Blaze.render(mobile_nav, "#top_nav_sub_menus")

2 - Using jquery-meteor-blaze with this syntax:

if (Meteor.isClient) {

      Template.home.onRendered(function () {
        if($.browser.mobile) {
          $("#top_nav_sub_menus")
            .blaze(template['mobile_nav'])
            .render();
        }
      });

      $(function(){
      ...
      })
    }

What am I missing here?

Note:

This is my tree view of my directory:

├── application.css.scss
├── application.html
├── application.js
├── client
│   ├── javascripts
│   │   ├── detectmobilebrowser.js
│   │   └── jquery-meteor-blaze.js
│   ├── stylesheets
│   │   ├── base.css.scss
│   │   ├── footer.css.scss
│   │   ├── home.css.scss
│   │   ├── nav.css.scss
│   └── views
│       ├── home.html
│       └── layouts
│           ├── desktop_nav.html
│           ├── footer.html
│           ├── mobile_nav.html
│           ├── nav.html
│           └── nav2.html
└── public
    ├── fonts
    │   └── ...
    └── images
        └── ...

@Abhi I tried it before posting this question. Doesn't work for me. — Zulhilmi Zainudin
– Zulhilmi Zainudin, Commented Jan 26, 2016 at 9:12
I do it like this: $("#top_nav_sub_menus").html({{> Template.dynamic template=mobile_nav }}) — Zulhilmi Zainudin
– Zulhilmi Zainudin, Commented Jan 26, 2016 at 9:16

code · Accepted Answer · 2016-01-26 09:20:03Z

0

Try using this:

{{> Template.dynamic template=templateFinder }}


Template.nav2.helpers({
templateFinder: function(){

 if ($.browser.mobile){
return mobile_nav; }
else{
return desktop_nav; }

}
});

answered Jan 26, 2016 at 9:20

code

2,1632 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zulhilmi Zainudin Over a year ago

I get this error Exception in template helper: ReferenceError: mobile_nav is not defined

Zulhilmi Zainudin · Accepted Answer · 2016-01-26 11:42:57Z

0

Ok, I managed to do it.

I put this in my application.js file:

  Template.nav2.helpers({
    isMobile: function(){
      if ($.browser.mobile){
        return true;
      } else {
        return false;
      }
    }
  });

And this inside my nav2.html file:

{{#if isMobile}}
  {{> mobile_nav}}
{{else}}
  {{> desktop_nav}}
{{/if}}

answered Jan 26, 2016 at 11:42

Zulhilmi Zainudin

9,39514 gold badges69 silver badges103 bronze badges

Collectives™ on Stack Overflow

How to load partial in Meteor using jQuery?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related