如何让空格键｛｛if｝｝中的HTML使用Session变量进行反应性更改

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

本文关键字：变量 使用 空格键 if 中的 HTML Session      更新时间：2023-09-26

在我的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);
        };
    }
});

将助手指定为值：

isDisplayed : Session.get('displayVar')

与做相同：

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

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

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

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

您的助手需要从匿名函数返回值：

Template.testTemplate.helpers({
  isDisplayed: function(){
    return Session.get("displayVar");
  }
});
相关文章：