Blaze Template Helpers - {{ }} doesn't render anything


#1

Hey guys,

I’ve been trying to use Blaze’s template helpers for a simple test and it’s not working at all.
The {{ }} in the html isn’t rendering what the helper function on the js file is telling to.
I tried 3 different syntaxes to check if this was the issue, and none of them. Here is my code:

imports/ui/pages/Home.js

import ‘./Home.html’;

if(Meteor.isClient){

Template.Home.helpers({

    test1: 'Test 1',

    'test2': 'Test 2',

    'test3': function(){
        return 'Test 3'
    }
    
});

}

imports/ui/pages/Home.html

<template name="Home">
  <div>
      <h1>Hello</h1>
      {{test1}}
      {{test2}}
      {{test3}}
  </div>
</template>

The h1 is rendering, but the {{ }} aren’t.
Any idea what could be wrong?
Note: I am using flow-router (in case that matters)


#2

I suspect your issue lies elsewhere. You can use any of those helper syntaxes successfully.

You can also use the more modern form of 3:

test4() {
  return 'Test 4'
}

Have you checked what’s going on in the browser console?


#3

Hi,

I tested the syntax you suggested, but it gave the same result.
The browser console doesn’t show any errors.

I tried removing flow-router and testing it directly, but still nothing… any ideas?


#4

I tested all four (with your code) and they all worked as expected. Which is why I think your issue is somewhere else in your code.

For example, I did have to make some assumptions:

  1. You’re using Meteor 1.8.
  2. You did not have a client/main.js and client/main.html.
  3. You edited the package.json to have the client mainModule set to imports/ui/pages/Home.js.

#5

Sorry, I didn’t provide enough info:

  • I am using Meteor 1.8
  • I didn’t edit package.json to have the client mainModule set to imports/ui/pages/Home.js

My file structure (UI-related) is:

client/main.html
=> just a head tag

client/main.js
import '../imports/startup/client/index.js'

imports/ui/layouts/body.html

<template name="Body">
   {{> Navbar}}
   {{> Home}}
   {{> Footer}}
</template>

imports/ui/layouts/body.js

import './body.html';
import '../pages/Home.html';

And a lib/routes.js file with ‘/’ set to BlazeLayout.render(“Body”).


#6

Do you have a minimal repo I can clone?


#7

#8

You never imported Home.js. I changed imports/ui/layouts/body.js to:

import './body.html';
import '../pages/Home'; // imports Home.js (which itself imports Home.html)
import '../partials/navbar.html';
import '../partials/footer.html';

#9

Great!!! Now it works. Thank you very much for the help!