流星的Session.set导致JQuery代码的问题？

Question

我正在使用流星0.5.4我刚刚遇到了Meteor的Session.set（）的一个奇怪问题。

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

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

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

多种形式对话模板然后显示的数据会议确定：

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

最后，这里是我的jQuery代码

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

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

当我删除Session.set（）一切工作正常 - 模态对话显示在第一次点击，因为它应该工作。

调试输出显示会话值在第一次点击时正确设置。

Session.set（）如何干扰我的JQuery插件？

Answer 1

leanModal正显示出流星引擎之前的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(); 
} 

然后你有上单击事件处理程序setTimeout破解的leanmodal部件，给予反应性的时刻在事件冒泡之前呈现OrderName内容。

假设this is the script，包住单击处理在这个脚本（约23行开始）是这样的：

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