Materialize.css Sidemenu无法随机工作

时间:2015-08-17 16:43:04

标签: javascript meteor materialize

我使用的是materialize.css,但侧面菜单似乎无法预测。它通常在localhost中的所有主要浏览器中都能正常工作,但是在生产中单击sidemenu并不会显示它(ridersam.meteor.com)。我不知道自己在这方面做错了什么。我会借助一些Karma来帮助你解决这个问题。我的header.html和header.js的代码如下:

header.html中

<template name="header">
        {{#if currentUser}}
        <div class="navbar-fixed">
            <nav role="navigation" class="amber accent-3">
                <div class="nav-wrapper container">
                    <a href="#" class="brand-logo center disable-link-cursor">{{navTitle}}</a>
                    <a href="#" class="nav-back-button {{backButtonActive}}">
                        <i class="mdi-navigation-chevron-left" style="font-size: 3em;"></i>
                    </a>
                    <a href="#" data-activates="slide-out" class="button-collapse show-on-large {{buttonCollapseActive}}">
                        <i class="mdi-navigation-menu"></i>
                    </a>

                    {{#if onActivityList}}
                        <a href="{{ pathFor 'activitySubmit' }}" class="right"><i class="mdi-content-add" style="font-size: 3em;"></i></a>
                    {{/if}}

                    <ul id="slide-out" class="side-nav amber accent-3">
                            <center><i class="ion-android-person custom-lg"></i></center>
                            <li class="{{ activeRouteClass 'rideList' }}"><span><i class="ion-android-bus liner"></i></span><a href="{{ pathFor 'ridesList' }}"><b>RIDES</b></a></li>

                            <li class="{{ activeRouteClass 'activityList' }}"><span><i class="ion-android-time liner"></i></span><a href="{{ pathFor 'activityList' }}"> <b>SCHEDULED</b></a></li>

                            <li class="{{ activeRouteClass 'mapCanvas' }}"><span><i class="ion-pull-request liner"></i></span><a href="{{ pathFor 'mapCanvas' }}"> <b>REQUEST RIDE</b></a></li>

                            <li><span><i class="ion-log-out liner"></i></span><a id="logout-button" href="#" ><b>LOG OUT</b></a></li>
                    </ul>
                </div>
            </nav>
        </div>
        {{/if}} 
    </template>

HEADER.js

Template.header.onRendered(function () {
    $(".button-collapse").sideNav({
        menuWidth: 300, // Default: 240
        edge: "left",
        closeOnClick: true
    });
});

Template.header.helpers({
    navTitle: function () {
        switch (Router.current().route.getName()) {
            case "activityList": return "Your Scheduled";
            case "login": return "Log In";
            case "register": return "Register";
            case "activitySubmit": return "Schedule Route";
            case "activityPage": return this.title;
            default: return "RideGlobus";
        }
    },
    onActivityList: function () {
        return Router.current().route.getName() === "activityList";
    },
    buttonCollapseActive: function () {
        return isBackPage() ? "hide-display" : "show-display";
    },
    backButtonActive: function () {
        return isBackPage() ? "show-display" : "hide-display";
    },
    activeRouteClass: function () {
        var args = Array.prototype.slice.call(arguments, 0);
        args.pop();

        var active = _.any(args, function (name) {
            return Router.current() && Router.current().route.getName() === name;
        });

        return active && "active";
    }
});

Template.header.events({
    "click #logout-button": function (e) {
        e.preventDefault();

        Meteor.logout(function (error) {
            if (error) {
                alert("We could not log you out at the moment. Please try again later.");
            } else {
                Router.go("login");
            }
        });
    },
    "click .nav-back-button": function (e) {
        e.preventDefault();
        window.history.back();
    }
});

isBackPage = function () {
    switch (Router.current().route.getName()) {
        case "activitySubmit": return true;
        case "activityPage": return true;
        case "ridePage": return true;
        case "mapCanvas": return true;
        default: return false;
    }
}

0 个答案:

没有答案