物化导航栏在 Meteor 中不起作用答案

【问题标题】：Materialize navbar not working in Meteor物化导航栏在 Meteor 中不起作用
【发布时间】：2016-03-31 01:44:06
【问题描述】：

我有一个 Meteor 项目，我正在使用 Materialize 框架。我已经安装了 Iron:router、materialize:materialize、cfs:standard-packages 和 cfs:gridfs。

我遇到的是导航栏无法正常工作。我已经按照http://materializecss.com 的文档进行操作，但没有运气。我的代码和推荐的代码如下。

<template name="nav">

<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
            </ul>
        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

建议使用以下代码初始化导航栏折叠功能（来自materialize docs）

$(".button-collapse").sideNav();

这个我试过了，还是不行。

此外，如果您查看下方的导航栏代码，则会包含一个下拉菜单。但是，使用具体化文档中推荐的代码，下拉菜单将不起作用。推荐代码如下。

$(".dropdown-button").dropdown();

我在下拉列表中包含的 jQuery 代码也来自物化文档，但仍然无法正常工作。它遵循上面的约定，但设置了几个选项。

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false, // Displays dropdown below the button
  alignment: 'left' // Displays dropdown with edge aligned to the left of button
}

);

【问题讨论】：

标签： javascript jquery meteor materialize

【解决方案1】：

我用这个代码...

Template.navbar.onRendered(function(){ $(".sidenav-icon").sideNav({ closeOnClick: true }); // http://materializecss.com/side-nav.html });

将导航栏替换为您的模板名称。您在呈现模板之前调用 .sideNav() 。为了测试这个工作你的黑客作品。模板展示后在开发者控制台调用sideNav函数是另一种方式。

【讨论】：

【解决方案2】：

经过大量搜索和考虑，我想出了修复方法。我想。它虽然有效。 :)

经过所有的搜索和思考，尽管我还是想使用 Meteor.templateName.events 将按钮/链接绑定到模板。下面是我添加到 core.js 的代码（这是我用于核心文件的所有 javascript 代码的文件。（_head.html、_footer.html、home.html、_nav.html）

Template.nav.events({
'click .button-collapse': function(event){
    $('.button-collapse').sideNav();
},
'click .dropdown-button': function(event){
    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
    );
}

});

如您所见，我使用了推荐的 jQuery 代码，但将其包装在 Meteor 的“点击”事件中。正如我所说，它可以工作，尽管需要几秒钟才能达到全部功能。我想这与加载时间或其他东西有关。我知道有一个解决方法，但我不确定那是什么。 :)

【讨论】：