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)
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?
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?
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:
- You’re using Meteor 1.8.
- You did not have a
client/main.js
and client/main.html
.
- You edited the
package.json
to have the client mainModule set to imports/ui/pages/Home.js
.
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”).
Do you have a minimal repo I can clone?
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';
5 Likes
Great!!! Now it works. Thank you very much for the help!
1 Like