Hi all,
I try #each of Spacebar to display all roles a users are in. But the following code makes the Template not recognise by Meteor build.
Please advice, thank you.
{{#each role in outletEmployeeData.roles.default-group}
<div class="ui label">
{{role}}
</div>
{{/each}}
lesliechw:
default-group
Thatâs not a valid JavaScript identifier. Have you tried outletEmployeeData.roles['default-group']
?
Hi,
I change it to the following and it still break Meteor build:
{{#each role in outletEmployeeData.roles['default-group']}
<div class="ui label">
{{role}}
</div>
{{/each}}
Can you share your complete template and helper?
Template.outletEmployeeItem.helpers({
outletEmployeeData: function () {
let outletEmployeeData = Template.instance().outletEmployeeData.get("outletEmployeeData");
return outletEmployeeData;
}
});
âoutletEmployeeDataâ is ReactiveDict. The data are from Collection Find.
The following is the template:
<template name="outletEmployeeItem">
<tr>
<td>{{outletEmployeeData.firstName}} {{outletEmployeeData.lastName}}</td>
<td>
{{#each role in outletEmployeeData.roles['default-group']}
<div class="ui label">
{{role}}
</div>
{{/each}}
</td>
<td class="center aligned">
{{checkSuspend employee.employee_id}}
</td>
<td class="center aligned">
{{> outletEmployeeActionButton employee=employee}}
</td>
</tr>
</template>
Try the following template which minimises the re-use of the helper and also restructures the each
:
<template name="outletEmployeeItem">
{{#let outletData=outletEmployeeData}}
<tr>
<td>{{outletData.firstName}} {{outletData.lastName}}</td>
<td>
{{#let roles=outletData.roles['default-group']}}
{{#each role in roles}}
<div class="ui label">
{{role}}
</div>
{{/each}}
{{/let}}
</td>
<td class="center aligned">
{{checkSuspend employee.employee_id}}
</td>
<td class="center aligned">
{{> outletEmployeeActionButton employee=employee}}
</td>
</tr>
{{/let}}
</template>
However, I think you may need to do something similar with employee
.
Thanks, will try it now and post update here. Thanks again.
1 Like
I try use the template you provide above, I get the following error which is the same as previous:
Uncaught Error: Cannot find module './outletEmployeeItem.html'
Sorry for the trouble. Not sure how to fix this.
As my previous Spacebar error, when I comment out the âroleâ #each Spacebar, there are no more error.
Same when I comment out the following part of the template:
{{#let roles=outletData.roles['default-group']}}
{{#each role in roles}
<div class="ui label">
{{role}}
</div>
{{/each}}
{{/let}}
This is the part that cause the error.
Youâve not shared that error before. That looks like youâve import
ed it incorrectly in the client .js
file.
lesliechw:
{{#each role in roles}
Thereâs a missing }
in that line. My fault - sorry. Coding in the browserâs never a good idea!
Hi, true that it looks like missing correct import of template. But that error doesnât exist when comment out the role part in the template.
So thatâs what I mean by it break the template.
I added the missing } but the error is exactly the same.
Can you share an exampleoutletEmployeeData
document?
{
"firstName":"User 02",
"lastName":"Sample",
"roles":
{"default-group":["appuser"]}
}
Here, thanks.
As an alternative way to achieve what I need, I created a new ârolesâ helper that show roles without error:
roles: function () {
let outletEmployeeData = Template.instance().outletEmployeeData.get("outletEmployeeData");
let defaultGroup;
if (outletEmployeeData) {
defaultGroup = outletEmployeeData.roles['default-group'];
console.log(defaultGroup);
return defaultGroup
}
}
But I really hope I can understand and get the initial solution work.
One thing for sure is this line in Spacebar cause error. Need the correct code for this line.
Yes. Iâm sure that worked for me before now, but itâs been a while.
It looks like []
is not allowed. That means you must either have a dedicated helper (as you have got working) or change the default-group
to something like default
or default_group
. Either of those will work with standard object syntax: outletData.roles.default
or outletData.roles.default_group
.
1 Like
Ok, thanks again for the info. Iâll just use the dedicated helper for now. Maybe Iâll change the group name in later stage.
Thanks again, very much appreciate your help.
1 Like