Meteor 框架实现

Question

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

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

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

Answer 1

在 Meteor 中使用 materializecss 效果很好，但您必须自己初始化 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 !");
  },
  [..]
});

总体而言，将 Materialise 主题集成到 Meteor 应用中并不像将主题放入源文件和 meteor adding materialize:materialize 那样简单，但应该不会太困难。

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