I've been experimenting with Meteor and ran into something I couldn't figure out. For fun, I was trying to make a slot machine. I had the following HTML:
<div class="slot-wrapper">
{{> slot}}
{{> slot}}
{{> slot}}
</div>
<template name="slot">
<div class="slot">
<div class="number"><span>{{ number }}</span></div>
<div class="divider"></div>
</div>
</template>
I want to have a different number for each slot. Is it possible to pass variables into template? Something like this:
<div class="slot-wrapper">
{{> slot 1}}
{{> slot 2}}
{{> slot 3}}
</div>
<template name="slot">
<div class="slot">
<div class="number"><span>{{ number i}}</span></div>
<div class="divider"></div>
</div>
</template>
Maybe I'm thinking about this the wrong way and there's a better way.
All of the previous answers are overkill or outdated. Here's how you can pass static parameters into templates, directly from HTML+Spacebars code, as of Meteor 0.8.x:
<div class="slot-wrapper">
{{> slot number="1"}}
{{> slot number="2"}}
...
</div>
<template name="slot">
<div class="number"><span>{{number}}</span></div>
</template>
All you have to do is pass key="value"
parameters in the {{> template}}
inclusion call:
{{> slot number="1"}}
Learn more at Spacebars Secrets: Exploring Meteor Templates.
If you want to pass the caller template's data to the child/nested/called template, here's how to do it: pass nothing. Instead, from the nested template, access the parent data context, ../
:
<div class="slot-wrapper">
{{> slot number="1"}}
{{> slot number="2"}}
...
</div>
<template name="slot">
<div>Machine name: {{../name}}</div>
<div class="number"><span>{{number}}</span></div>
</template>