带有框架的流星物化

Question

我计划使用materialize:materialize包到流星应用程序.据我所知,实现使用了很多javascript来实现效果,折叠等等.Meteor有自己的事件处理,但我认为实现将使用jquery(我想我不需要添加jquery,它包括,或？)并将在流星事件之外运行.

是否足以只添加包,一切都会工作,不仅仅是外观,还有javascript(感觉)？我试图让它与我买的物化模板一起工作,而不是为了流星的optimezed,所以我有问题让它工作.

有没有人尝试这个设置,是否有任何建议的良好来源.

Answer 1

使用带有Meteor的materializecss非常有用,但你必须自己初始化jQuery插件(就像没有Meteor的常规HTML5应用程序一样,正如Materialize文档提示的那样).

流星模板系统包括自动jQuery,你必须使用template.onRendered正确初始化插件,而不是在$(document).ready回调中初始化它们.

例如,以下是Meteor模板中的简单Materialise下拉标记:

<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 addING materialize:materialize,但它不应该是太困难.

有时在尝试初始化Materialize插件时会遇到与Meteor相关的问题,但相应的标记尚未呈现到DOM中,请参阅此问题以获得可能的解决方案:Meteor + Materialize:可折叠为每个插件不起作用