如何使用 jQuery 在 Meteor 中加载部分内容？

Question

我的 application.html 文件中有这个：

<head>
    ...
</head>

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

这是我的 nav2.html:

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

我尝试在我的 nav2 中加载 2 个不同的导航项，目标是 top_nav_sub_menus 元素。一种用于桌面，一种用于移动。

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>

因为我正在使用 detectmobilebrowser.js，所以我尝试在我的 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));      
    }
  })
}

但是不行。

我试过但没有用的方法:

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

2 - 使用 jquery-meteor-blaze 语法：

if (Meteor.isClient) {

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

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

我在这里错过了什么？

注:

这是我的目录树视图：

├── 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
        └── ...

Answer 1

试试这个：

{{> Template.dynamic template=templateFinder }}


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

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

}
});

Answer 2

好的，我做到了。

我把它放在我的 application.js 文件中：

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

这在我的 nav2.html 文件中：

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

如何使用 jQuery 在 Meteor 中加载部分内容？

How to load partial in Meteor using jQuery?

jquery

templates

partial

meteor

meteor-blaze