使用带有jQueryMobile的iron-router

时间:2014-07-02 20:05:32

标签: jquery-mobile meteor iron-router

我为我的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> 

0 个答案:

没有答案