Meteor 与 Session.set 和 jQuery 合二为一答案

【问题标题】：Meteor combined with Session.set and jQuery in one callMeteor 与 Session.set 和 jQuery 合二为一
【发布时间】：2013-11-18 09:06:51
【问题描述】：

我试图让一些非常基本的东西在 Meteor 中工作，当用户单击按钮时，会调用 Session.set()，然后显示 div。问题是，如果我不调用 Session.set() ，则行为与单击按钮时显示 div 的预期一样。但是一旦我包含 Session.set() 我需要在消息实际显示之前单击两次。为确保可以重现该行为，请确保页面是干净的加载而不是 Meteor 刷新！ HTML的代码是：

<head>
  <title>test</title>
</head>
<body>
  {{> home}}
</body>

<template name="home">
  <div>
    <input type="button" id="addButton" value="add">
  </div>
  {{> popup}}
</template>

<template name="popup">
  {{#with messageHelper}}
  <div id="messageDiv" style="display: none">
    message is {{message}}
  </div>
{{/with}}
</template>

这是让它运行的 Javascript。

Template.home.events({
  'click #addButton': function(){
    // **** if this line is commented out, it will work
    Session.set("messageHelper", {message: 'HERE'});
    // ****
    $('#messageDiv').show();
  }
});

Template.popup.helpers({
  messageHelper: function(){
    return Session.get("messageHelper");
  }
});

【问题讨论】：

标签： javascript jquery session meteor

【解决方案1】：

我认为更改后的会话变量会将您的模板重新呈现为其设置 style="display: none" 的原始状态。该问题已讨论here。解决方案是重新组织您的模板，使反应性不在显示被切换的模板中。

一个更简单的解决方案可能是在有消息时使用把手 #if 帮助器来显示您的模板：

<template name="popup">
   {{#with messageHelper}}
     {{#if message}}
       <div id="messageDiv">
         message is {{message}}
       </div>
     {{/if}}
   {{/with}}
</template>

那么在事件处理程序中就不需要 .show() 了。

【讨论】：

这是有道理的。需要一些时间来重新思考如何使用新框架做事的思路:) 感谢您的快速回复