【问题标题】:How to use jQuery in Meteor 1.0如何在 Meteor 1.0 中使用 jQuery
【发布时间】: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>

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

【问题讨论】:

    标签: jquery meteor


    【解决方案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 事件一起使用
      猜你喜欢
      • 2014-05-11
      • 1970-01-01
      • 2015-03-09
      • 2014-12-26
      • 2012-07-31
      • 1970-01-01
      • 2015-02-21
      • 2014-12-25
      • 2016-05-02
      相关资源
      最近更新 更多