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

Question

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

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

当用户点击模板实例时，我正在使用模板的事件映射将一些信息设置到会话中。

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 引擎反应性地将新内容注入其中之前显示 OrderDialogue 的 HTML 内容，因此关键是将 leanModal 单击包装在 setTimeout 中以确保反应发生。

假设你有：

<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();
}

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

假设this is the script，将点击处理程序包装在此脚本中（从第 23 行开始），如下所示：

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