Passing variables into template inclusion spacebars and regular spacebars in Meteor? - meteor

Question

I've got lots of these similar blocks inside my templates.
The only real difference between each block is the sku (ex. hdrPhotos, panos, twilightPhotos, exteriors).
I would much rather write a single template that takes a sku argument and loop through an array of skus to create each block, but how would I insert a value into something that's already using spacebars {{ }} ?
{{> afFieldInput name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}},
{{formatToCurrency currentPrice.hdrPhotos}} or
{{{services "hdrPhotos" "html"}}} ?
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.hdrPhotos}}</b> - {{services "hdrPhotos" "description"}}</p>
<p>{{{services "hdrPhotos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.panos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.panos}}</b> - {{services "panos" "description"}}</p>
<p>{{{services "panos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.twilightPhotos.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.twilightPhotos}}</b> - {{services "twilightPhotos" "description"}}</p>
<p>{{{services "twilightPhotos" "html"}}}</p>
</div>
</div>
<div class="col-md-12">
{{> afFieldInput name="servicesSelected.exteriors.selected" type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency currentPrice.exteriors}}</b> - {{services "exteriors" "description"}}</p>
<p>{{{services "exteriors" "html"}}}</p>
</div>
</div>
I wasn't able to get it to work with string concatenation:
itemBlock: function(sku){
var string = '' +
'<div class="col-md-12">' +
'{{> afFieldInput class="track-order-change label-to-bold-if-checked" name="servicesSelected.hdrPhotos.selected" type="boolean-checkbox" noselect="true"}}' +
'<div class="divider small-margins">' +
'</div>' +
'<div class="item-description">' +
'<p><b>{{formatToCurrency currentPrice.' + sku + '}}</b> - {{services "' + sku + '" "description"}}</p>' +
'<p>{{{services "' + sku + '" "html"}}}</p>' +
'</div>' +
'</div>';
return string;
}
In my html template:
{{{itemBlock hdrPhotos}}}
The HTML portion of it comes out fine, but everything inside {{ }} and {{{ }}} gets rendered on the page in the literal form (see screenshot)

Answer 1

You should try with nested sub-expressions in a dedicated template.
{{ > yourSkuTemplate "youSkuType"}}
<template name="yourSkuTemplate ">
<div class="col-md-12">
{{> afFieldInput name=(skuServicesSelected) type="boolean-checkbox" noselect="true"}}
<div class="divider small-margins">
</div>
<div class="item-description">
<p><b>{{formatToCurrency (skuCurrentPrice)}}</b> - {{services (skuName) (skuyDescription}}</p>
<p>{{{services (skuName) (whatever)}}}</p>
</div>
</div>
</template>
Where skuServicesSelected skuName and all the other in parenthesis are other helpers