javascript - 如何在 meteor 中使用 jQuery 代码？

Question

所以我不能在 meteor 中运行 JQuery 代码!我添加了包 meteor add jquery。

解决方案:让 jquery 在 meteor 中运行 OR 将 JQuery 代码转换为 JS 代码

有人知道怎么解决吗？

非常感谢您的帮助!

示例

$(document).ready(function() {
    $('.collapsible').collapsible({
        accordion: false
    });
});

Answer 1

您不需要在 Meteor 项目中显式添加 jquery 包，因为它通常已经包含依赖于 jquery 的包(即模板包)。

但是，您不能只在 Meteor 应用程序中复制 jQuery 代码示例并期望它们在没有一点额外工作的情况下工作:特别是您需要初始化 jQuery 仅当相应的 DOM 元素已被 Meteor 模板渲染引擎 Blaze 插入到 DOM 中时才插入。

假设您有以下 (MaterializeCSS) 模板标记:

<template name="collapsible">
  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>
</template>

您需要在 onRendered 生命周期事件中初始化可折叠插件:

Template.collapsible.onRendered(function(){
  // we're using the template instance scoped jQuery
  this.$('.collapsible').collapsible({
    accordion: false
  });
});