用户界面-流星与框架物化

Question

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

仅仅添加包和一切都会工作，不仅仅是外观，而且是javascript(感觉)是足够的吗?我正试图让它与我买的一个物化模板一起工作，它没有为流星优化，所以我有问题，使它工作。

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

Answer 1

使用materializecss与Meteor工作很好，但你将不得不初始化jQuery插件自己(就像在一个普通的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
  });
});

你应该使用标准的流星事件来处理用户交互:

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

总的来说，你的Materialize主题集成到你的流星应用程序不是一些琐碎的事情，如在你的源文件中删除主题和meteor add materialize:materialize，但它不应该是一些过于困难的事情。

有时你会遇到流星相关的问题，当你试图初始化Materialize插件，但相应的标记还没有呈现到DOM，看看这个问题的一个可能的解决方案:Meteor + Materialize: collapsable in for each不't工作