流星的Session.set导致JQuery代码出现问题? [英] Meteor's Session.set causing issues with JQuery code?

问题描述

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

I am using Meteor 0.5.4 I have just encountered a strange issue with Meteor's Session.set().

当用户单击模板实例时，我想显示一个简单的模态对话框.

I want to show a simple modal dialogue when user clicks on a template instance.

当用户单击Template实例时，我正在使用Template的事件映射为Session设置一些信息.

I am using Template's event map to set some info into Session when user clicks onto a Template instance.

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

模式对话模板然后在会话中显示数据集:

Modal dialogue template then displays the data set in Session:

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

最后是我的JQuery代码

and finally here's my JQuery code

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

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

When I use Session.set() - as showed above inside Template.orders's click event handler - JQuery plugin doesn't show the modal dialogue on the first click on the template instance but only on second click on that exact instance. It takes two clicks on template instance to get the modal dialogue.

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

When I remove Session.set() everything is working fine - modal dialogue is shown on first click as it's supposed to work.

调试输出显示，第一次单击时正确设置了会话值.

Debug output shows that Session value is properly set on the first click.

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

How can Session.set() interfere with my JQuery plugin?

推荐答案

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

leanModal is showing the HTML content of OrderDialogue before the Meteor engine reactively infuses the new content into it, so the key is to wrap the leanModal click in a setTimeout to ensure the reactivity has happened.

假设您拥有:

<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:

And your 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小部件，以便在事件冒泡之前有一定的时间来呈现OrderName内容.

Then you have to hack the leanmodal widget with a setTimeout on the click event handler, to give the reactivity a moment to render the OrderName content prior to event bubbling.

假设这是脚本，将此脚本中的点击处理程序(从第23行开始)是这样的:

Assuming this is the script, wrap the click handler in this script (starting around line 23) like this:

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

这篇关于流星的Session.set导致JQuery代码出现问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！