如何让空格键 {{if}} 中的 HTML 响应会话变量进行更改？

Question

在我的 Meteor 项目中，我希望根据 Session 变量显示模板部分；但是，{{#if}} 中的 HTML 没有反应性出现。
如何让 {{#if}}{{/if}} 响应地更改会话变量？

HTML:

<head>
  <title>testApp</title>
</head>
<body>
  {{> testTemplate}}
</body>

<template name="testTemplate">
  {{#if isDisplayed}}
    <div>It's working!</div>
  {{/if}}
  <button id="testButton">Toggle Display</button>
</template>

JavaScript:

Session.setDefault("displayVar", false);

Template.testTemplate.helpers({
    isDisplayed: Session.get("displayVar")
});

Template.testTemplate.events({
    "click #testButton": function () {
        if (Session.get("displayVar")) {
            Session.set("displayVar", false);
        } else {
            Session.set("displayVar", true);
        };
    }
});

Answer 1

正在为助手赋值：

isDisplayed : Session.get('displayVar')

等同于：

isDisplayed: false // or true, or whatever 'displayVar' is when run

要解决这个问题，只需使用一个函数（这里是 ES6 Arrow function，因为 Meteor 使用 Babel）：

isDisplayed: () => Session.get('displayVar')

使用函数确保生成 Tracker 计算。

Answer 2

您的助手需要 return 来自匿名函数的值：

Template.testTemplate.helpers({
  isDisplayed: function(){
    return Session.get("displayVar");
  }
});

如何让空格键 {{if}} 中的 HTML 响应会话变量进行更改？

How do I get HTML inside Spacebars {{if}} to change reactively with a Session variable?

javascript

meteor

spacebars