How can I add a unique class and assign unique data to copies of the same template using Meteor, Blaze, Spacebars?

Question

I'm trying to create a dynamic slider that can be reused with different images.

<div id="sly_container" class="sly">
    <ul>
        {{#each propertyImages}}
        <li><img src="{{ImageURL}}"></li>
        {{/each}}
    </ul>
<button id="gallery_btn-prev"><img class="gallery_arrow"/>prev</button>
<span id="middleSpan"></span>
<button id="gallery_btn-next"><img class="gallery_arrow"/>next</button>
</div>

I populate propertyImages with an httpRequest (I make several of these):

(function(o){
    HTTP.call( 'GET', 'https://api.rentcafe.com/rentcafeapi.aspx?requestType=images&type=propertyImages&companyCode=c00000084939&propertyCode='+v+'', {}, 
    function( error, response ) {
        if ( error ) {
            console.log( error );                               
        } else {
            var content = JSON.parse(response["content"]); 
            obj[p] = content;
            if( o == l){    
                CommunityImages.insert(obj) 
                Session.set('imagesLoaded',true);               
            }
        }
        console.log(v+ ' ' + p + ' ' + o + ' images delivered')         
    })
}(o++))

and then use this helper:

Template.sly.helpers({

    propertyImages: function(){
        if(Session.get('property') && CommunityImages.find().fetch()[0]){
            return CommunityImages.find().fetch()[0][Session.get('property')]
    }
})

After it renders I run some more logic on it to create the slider from the images. It works well when there is one slider per view, since it is dependent on the Session.set('property', 'whatever') but I want to have many on the same page each populated with different images. I can add keys and values to the image objects, so I suppose maybe I can do this with a Spacebars conditional? In the end I'd like to have something like this

    <div id="summit-sly">{{> sly}}</div>
    <div id="hillcroft-sly">{{> sly}}</div>
    <div id="merrit_station-sly">{{> sly}}</div>

with each slider containing it's respective images, OR I'm now seeing that maybe partials could work somehow:

  {{>sly summit}}
  {{>sly hillcroft}}
  {{>sly merrit_station}}

Each slider will basically need it's own class name, so that the logic that runs on render will target each one specifically and not all of them.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Indeed, you can use partials in Blaze spacebars with either:

A single argument that acts as the data context of the called template (as exemplified in Meteor Guide > View > User Interfaces > UI components > Smart components).
Named arguments (as shown in Meteor Guide > View > Blaze > Spacebars > Template inclusion), which are actually assembled into a data object (see below).

{{> subComponent arg1="value-of-arg1" arg2=helperThatReturnsValueOfArg2}}

Another tutorial: http://meteorcapture.com/spacebars/#template-inclusion-ex-2

Reference: Meteor API Docs > Packages > spacebars > Inclusion and Block Arguments

Inclusion tags ({{> foo}}) and block tags ({{#foo}}) take a single data argument, or no argument. Any other form of arguments will be interpreted as an object specification or a nested helper:

Object specification: If there are only keyword arguments, as in {{#with x=1 y=2}} or {{> prettyBox color=red}}, the keyword arguments will be assembled into a data object with properties named after the keywords.

Nested Helper: If there is a positional argument followed by other (positional or keyword arguments), the first argument is called on the others using the normal helper argument calling convention.

Then you retrieve the data context through the templateInstance.data property:

In an onCreated, onRendered or onDestroyed callback, the template instance is directly available in this.
In a helper or in the HTML part of the template, the data context is directly available in this (no need to look for its data child property). In a helper, you can also access the template through Template.instance().
In an event handler, the template instance is passed as the 2nd argument of the listener.

How can I add a unique class and assign unique data to copies of the same template using Meteor, Blaze, Spacebars?

1 Answers1