如何在 Meteor 1.0 中使用 jQuery

Posted 2023-03-08

【中文标题】如何在 Meteor 1.0 中使用 jQuery

【英文标题】：How to use jQuery in Meteor 1.0

【发布时间】：2015-01-22 21:01:36

【问题描述】：

我正在尝试在meteor.js 应用程序中使用这样的jquery。

JS：

    if (Meteor.isClient)       
    Meteor.startup(function() 
            $( "button" ).click(function() 
              $( "p" ).toggle();
            );
          );
...

或者没有meteor.startup函数。两者都不起作用。

html：

<button>Click</button>
<p>Can you see me?</p>

当我点击按钮时，我没有收到任何错误，也没有任何反应。

【参考方案1】：

在编写应用程序代码之前尝试使用标准的 jQuery DOM 就绪函数...

if (Meteor.isClient) 
    $(function() 
        // your jQuery code here...
    );

【参考方案2】：

在启动时，您的 HTML 不太可能被呈现。你想在你的 templated.rendered 事件上这样做。

但是，就像其他人所说的那样，无论如何你都不想那样做。

【讨论】：

这是一个正确的答案，但我注意到虽然在 isClient 代码中调用 $ 而不是 isServer 块很明显，但记住这一点很重要。它默认包含在 Meteor 1.0 中，不会出现在流星列表中。试试吧，但在客户端应该可以工作，除非你访问模板依赖项，所以至少 $("body") 应该在 isClient 中工作。

【参考方案3】：

使用meteor list查看jquery包是否包含。 如果没有，使用meteor add jquery添加包

【讨论】：

根据 Meteor Docs 和 Athmosphere atmospherejs.com/meteor/jquery Jquery 应该会自动安装。但是我看不到它列出来。我安装了它，现在 jquery 可以工作了。这些文档非常具有误导性。

是的，即使没有明确的软件包安装，jquery 似乎也“就在那里”。

@Bird Eggegg : meteor list 列出了你明确添加到项目中的包（+ 如果你有一个新的流星项目，你会发现那里列出了 3 个包 autopublish、insecure、meteor-platform )。如果你想查看meteor core附带的所有包，你可以查看你的项目文件夹，.meteor文件夹，versions文件...

【参考方案4】：

你不应该使用 jQuery 来处理这样的简单事件，而是使用 Meteor 模板事件映射：

HTML：

<template name="myTemplate">
  <button type="button">Click me !</button>
  <p>Can you see me ?</p>
</template>

JS：

Template.myTemplate.events(
  "click button":function(event, template)
    template.$("p").toggle();
  
);

【讨论】：

感谢您的回复！但是，为什么我的示例 jquery 不起作用？应该是吧？

Meteor 完全控制了 DOM 管理（这就是为什么它很容易处理的原因，对吧？）并且不能确保您使用 jQuery 设置的事件将在模板重新渲染时保留，所以我认为这就是你的代码失败的原因，无论如何都要坚持使用 Meteor 模板来避免陷阱。

我认为但我不确定它是否不起作用，因为在启动时还没有 DOM 元素，它可能会与 .rendered 事件一起使用