如何使用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
└── ...
答
好吧,我设法做到这一点。
我把这个在我的的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}}
答
尝试使用这样的:
{{> Template.dynamic template=templateFinder }}
Template.nav2.helpers({
templateFinder: function(){
if ($.browser.mobile){
return mobile_nav; }
else{
return desktop_nav; }
}
});
+0
我得到这个错误'模板助手中的异常:ReferenceError:mobile_nav is not defined' –
http://*.com/questions/ 12968808 /动态加载模板在流星js –
@Abhi我发布这个问题之前尝试过。不适合我。 –
你在nav2中写{{> whatever_nav}}吗? –