我有這個我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
└── ...
http://stackoverflow.com/questions/ 12968808 /動態加載模板在流星js –
@Abhi我發佈這個問題之前嘗試過。不適合我。 –
你在nav2中寫{{> whatever_nav}}嗎? –