2

我计划使用 materialize:materialize 包到一个流星应用程序。据我所知，物化使用大量的 javascript 来实现效果、折叠等。Meteor 有自己的事件处理，但我想 materialize 将使用 jquery（我想我不需要添加 jquery，它包含在内，或者？）并将在流星事件之外运行。

只添加包就足够了，一切都会正常工作，不仅是外观，还有 javascript（感觉）？我试图让它与我购买的物化模板一起使用，并且它没有针对流星进行优化，所以我很难让它工作。

有没有人尝试过这个设置，有没有好的资源建议。

4

1 回答 1

8

将 materializecss 与 Meteor 一起使用效果很好，但您必须自己初始化 jQuery 插件（就像在没有 Meteor 的常规 HTML5 应用程序中一样，正如 Materialize 文档所暗示的那样）。

Meteor 模板系统自动包含 jQuery，您必须使用它template.onRendered来正确初始化插件，而不是在$(document).ready回调中初始化它们。

例如，这是 Meteor 模板中的一个简单的 Materialize 下拉标记：

<template name="myDropdown">
  <a class="dropdown-button" data-activates="my-dropdown">
    My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
  </a>
  <ul id="my-dropdown" class="dropdown-content">
    <li class="js-first-item"><a>First item</a></li>
    <li class="js-second-item"><a>Second item</a></li>
    <li class="divider"></li>
    <li class="js-third-item"><a>Third item</a></li>
  </ul>
</template>

这是相应的插件初始化：

Template.myDropdown.onRendered(function(){
  this.$(".dropdown-button").dropdown({
    hover:false
  });
});

您应该使用标准 Meteor 事件来处理用户交互：

Template.myDropdown.events({
  "click .js-first-item": function(event, template){
    console.log("clicked on the first item !");
  },
  [..]
});

meteor add总体而言，将 Materialise 主题集成到 Meteor 应用程序中并不像将主题放入源文件和ing那样微不足道materialize:materialize，但它不应该过于困难。

有时您会在尝试初始化 Materialize 插件时遇到与 Meteor 相关的问题，但相应的标记尚未呈现到 DOM 中，请参阅此问题以获取可能的解决方案：Meteor + Materialize: collapsable in for each doesn't work

于 2015-05-26T13:39:23.913 回答