我为我的Meteor项目安装了铁路由器,它正在使用jQM进行用户界面,但是当我设置一个简单的路由时,我无法显示我的jQM页面。
我的router.js如下:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('splash', {path: '/'});
});
我的layout.html如下:
<template name="layout">
<div data-role="page" data-theme="q" id="splashPage">
<div data-role="content">
{{>yield}}
</div>
</div>
</template>
我的splash.html如下:
<template name="splash">
<div class="login">
<img src="images/logo.png" alt="Hub logo">
</div>
</template>
据我所知,铁路由器{{>yield}}
应该放入你在router.js中定义的任何模板,在这种情况下splash
用于根URI。发生了什么事情,我确实在生成的HTML中看到了这一点,但是有一个单独的div似乎干扰了jQM。任何想法如何让两个div调和?
生成的HTML在哪里:
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 324px;">
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div data-role="page" data-theme="q" id="splashPage">
<div data-role="content">
<div class="login">
<img src="images/logo.png" alt="Approval Hub logo">
</div>
</div>
</div>
</body>