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

我有这个我application.html内文件：如何使用jQuery加载Meteor的部分内容？

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

来源

2016-01-26 Zulhilmi Zainudin

http://stackoverflow.com/questions/ 12968808 /动态加载模板在流星js –

@Abhi我发布这个问题之前尝试过。不适合我。 –

你在nav2中写{{> whatever_nav}}吗？ –

好吧，我设法做到这一点。

我把这个在我的的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}}

来源

2016-01-26 11:42:57

尝试使用这样的：

{{> Template.dynamic template=templateFinder }} 


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

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

} 
});

来源

2016-01-26 09:20:03

我得到这个错误'模板助手中的异常：ReferenceError：mobile_nav is not defined' –

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

回答

相关问题