2

我正在使用 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.set() 如何干扰我的 JQuery 插件？

4

1 回答 1

2

leanModalOrderDialogue在 Meteor 引擎反应性地将新内容注入其中之前显示 HTML 内容，因此关键是将leanModal单击包装在 asetTimeout中以确保发生反应。

假设你有：

<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 事件处理程序上使用 a 来破解leanermodal 小部件，以便在事件冒泡之前setTimeout给反应性一点时间来呈现内容。OrderName

假设这是 script，将 click 处理程序包装在此脚本中（从第 23 行开始），如下所示：

$(this).click(function(e) {
    setTimeout(function() {
        var modal_id = $(this).attr("href");
        ...
    }, 1);
});
于 2013-01-20T20:41:50.563 回答