Blaze if statement not evaluating properly

I have the following code, here are the extracted bits relevant to the issue:

The code:


page.js (This is the entirety of this file)


import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Accounts } from 'meteor/accounts-base';
import { Mongo } from 'meteor/mongo';
showBasicInfo = new ReactiveVar(true);

page.html

<template name="Content">
  <div class='default-layout'>
    {{#if showBasicInfo}}
      {{> BasicInfo}}
    {{/if}}
  </div>
</template>

The BasicInfo template is just pure html, no blaze or scripts or anything fancy.


The Problem

To put it simply, BasicInfo is never rendered.


Debugging

I stopped the javascript using the debugger using a breakpoint before the page loaded.

This line executes:
showBasicInfo = new ReactiveVar(true);

After it executes showBasicInfo.get() returns true. Prior to this line it was undefined as expected.

After that the following code is executed, at which point I assume it should be prepared to render the

Template.__checkName("Content");
Template["Content"] = new Template("Template.Content", (function() {
  var view = this;
  return HTML.DIV({
    class: "default-layout"
  }, "\n    ", Blaze.If(function() {    return Spacebars.call(view.lookup("showBasicInfo"));
  }, function() {
    return [ "\n      ", Spacebars.include(view.lookupTemplate("BasicInfo")), "\n    " ];
  }), "\n  ");
}));

Nothing is loaded, and the page remains empty. None of the HTML from the BasicInfo template is within the page source.


Strange Fix?

Getting rid of the if-statement fixes the issue.

Am I just getting something wildly wrong here?

Any help would be greatly appreciated.

So you basically need a layer in between your reactiveVar and your template; in most cases, this would be a helper. Also, you probably would want to scope the reactiveVar to your template instance:

// page.js

Template.Content.onCreated(function() {
  this.showBasicInfo = new ReactiveVar(true);
});

Template.Content.helpers({
  showBasicInfo () {
    let tmpl = Template.instance();
    return tmpl.showBasicInfo.get();
  }
});
1 Like

You are correct! I didn’t realize I was missing that.

It works in main.js because I had:

Template.HomeTop.helpers({
  showContent: function() {
    return ShowContent.get();
  }
});
1 Like