jquery - Meteor 的 Session.set 导致 JQuery 代码出现问题？

Question

我正在使用 Meteor 0.5.4 我刚刚遇到了 Meteor 的 Session.set() 的一个奇怪问题。

我想在用户单击模板实例时显示一个简单的模式对话框。

当用户单击模板实例时，我使用模板的事件映射将一些信息设置到 session 中。

Template.Orders.events({
'click' : function () {
    Session.set("OrderName", this.name);
}
});

模态对话模板然后显示Session中的数据集:

Template.OrderDialogue.OrderName = function() {
    return Session.get("OrderName");
}

最后这是我的 JQuery 代码

Template.Orders.rendered = function() {
    jQuery('a[rel*=leanModal]').leanModal();
}

当我使用 Session.set() 时 - 如上面在 Template.orders 的单击事件处理程序中所示 - JQuery 插件在第一次单击模板实例时不会显示模式对话框，而仅在第二次单击该确切实例时显示模式对话框。需要在模板实例上单击两次才能获得模态对话框。

当我删除 Session.set() 时，一切工作正常 - 第一次单击时会显示模式对话框，因为它应该工作。

调试输出显示 session 值在第一次单击时已正确设置。

Session.set() 如何干扰我的 JQuery 插件？

Answer 1

leanModal 在 Meteor 引擎 react 性地将新内容注入(inject)其中之前显示 OrderDialogue 的 HTML 内容，因此关键是包装 leanModal code> 单击 setTimeout 以确保 react 已发生。

假设你有:

<template name="OrderDialogue">
    <div id="overlay_content">
       <h1>{{OrderName}}</h1>
    </div>
</template>

<template name="Orders">
    {{#each order}}
        <a href="#overlay_content" rel="leanModal">{{name}}</a>
    {{/each}}
</template>

还有你的 JavaScript:

Template.Orders.events({
   'click' : function () {
      Session.set("OrderName", this.name);
   }
});

Template.OrderDialogue.OrderName = function() {
   return Session.get("OrderName");
}

Template.Orders.rendered = function() {
   $("a[rel*=leanModal]").leanModal();
}

然后，您必须在点击事件处理程序上使用 setTimeout 来破解 Leanmodal 小部件，以便在事件冒泡之前给 react 性一些时间来呈现 OrderName 内容。

假设this is the script ，将点击处理程序包装在此脚本中(从第 23 行左右开始)，如下所示:

$(this).click(function(e) {
    setTimeout(function() {
        var modal_id = $(this).attr("href");
        ...
    }, 1);
});