Reputation: 3
I have the following three files:
The each statement in HTML does not output data if it the HTML is surrounded by template. Removing the template is outputting data.
//file name : abc.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}
//file name router.js
Router.map(function () {
this.route('mylist',{
path:'/list',
});
});
//file name: abc.html
<template name="mylist">
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
<template name="task">
<li>{{text}}</li>
</template>
Why doesn't the template output data with the #each
statement?
Upvotes: 0
Views: 47
Reputation: 2582
You are using Template.body.helpers
instead of mylist
helpers.
Try to modify your code as below:
if (Meteor.isClient) {
// This code only runs on the client
Template.mylist.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}
You should also remove <body>
tag from mylist
template and include your template mylist
on your html body
:
<body>
{{>mylist}}
</body>
<template name="mylist">
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</template>
<template name="task">
<li>{{text}}</li>
</template>
Upvotes: 1