为 android 编译 meteor 应用程序时,materialize navbar 的行为被破坏

Behaviour of materialize navbar is broken when meteor app is compiled for android

我目前正尝试在 meteor 网站上制作一个 material 设计版的简单待办事项教程应用程序。但是,当为 android 编译应用程序时,我遇到了一个问题,即让导航栏按钮在触摸时实际执行任何操作。问题的 gif - http://i.imgur.com/vRMhIfy.gif

HTML 片段:

<header class="fixed-navbar">
    <nav class="light-blue" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo">Simple Tasks</a>

            <ul class="left hamburger">
                <li><a href="#" class="categories hide-on-large-only" data-activates="mobile-demo"><i
                        class="mdi-navigation-menu"></i></a></li>
            </ul>

            <ul class="right">
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu</a></li>
            </ul>


            <ul id="dropdown1" class="dropdown-content">
                <li><a href="#!">Account</a></li>
                <li><a href="#!">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#!">About</a></li>
            </ul>
        </div>
    </nav>
</header>

<div class="side-nav fixed" id="mobile-demo" style="  min-height: 100%;">
    <div class="sidebar">
        <ul>
            <li><a href="">All Tasks</a></li>
            <li><a href="">Unsorted</a></li>
            <li><a href="">Placeholder</a></li>
            <li><a href="">Another Placeholder</a></li>
        </ul>
    </div>

</div>

相关Javascript:

if (Meteor.isClient) {
    $( document ).ready(function(){
        console.log("Document ready!");
        $(".categories").sideNav();
    });
}

materialize css 和 javascript 通过使用最新版本 material 的 this package 的分支版本包含在应用程序项目中ize(alpha 版本 v0.96.1)

感谢任何帮助!

这很可能是由代码中的 javascript 错误引起的。

通常在开发模式下,您的文件不会串联在一起,因此如果您遇到错误,它不会阻止您应用程序的任何其他部分运行。

这在生产模式上是不同的。如果你有一个单独的 js 异常 none,其余代码将 运行。这可能就是为什么 JS 没有 运行 设置侧边导航点击事件的原因。

要修复此问题,请在开发模式下使用 javascript 控制台加载您的应用程序,找到 JS 错误并修复它。执行此操作后,它应该可以在生产模式下正常工作。

此外,最好在模板的 onrendered 回调中 运行 $(".categories").sideNav();,尽管这可能不是您的问题:

Template.xxxx.onRendered(function() {
    $(".categories").sideNav();
});

其中 xxxx 是包含您的 .categories 导航栏的模板。