Passing variables into template inclusion spacebars and regular spacebars in 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