How to read additional data within handlebars block expression template?

Question

My html document will have div container which gets populated with handlebars template name 'relatedVideosTemplate' on execution.

<div id="relVideos"></div>

Below anonymous function will make ajax request and pass the data to handlebar template which loops over all items in data object to construct related videos UI.

(function(options) {
    var defualt = {
        defaultThumb: "/url/to/default/thumbnail/",
        apiURL: '/path/to/api/url'
    };

    options = options || {};
    options = $.extend(true, defaults, options);               

    // handlebars template for the related video carousel
    var relatedVideosTemplate : "<h3>Related Videos</h3>" +
                            "<ul class=\"related-videos\">" +
                            "{{#foreach items}}<li class=\"video {{#if $last}} last{{/if}}\">" +
                            "<a href=\"/video/?videoid={{id}}\" class=\"image\">" +
                            "<img alt=\"{{name}}\" {{#if videoStillURL}}src=\"{{videoStillURL}}\"{{else}}src=\"{{defaultVideoThumb}}\"{{/if}} width=\"90\" height=\"75\" data-id=\"{{id}}\"  onerror=\"this.src='{{defaultVideoThumb}}';\" />" +
                            "<span class=\"video-time\">{{length}}</span></a>" +
                            "<div class=\"info\"><h5><a href=\"/video/?videoid={{id}}\">{{name}}</a></h5>" +
                            "<span class=\"published-date\">{{publishedDate}}</span>" + 
                            "{{#if playsTotal}}<span class=\"video-views\">{{playsTotal}} views</span>{{/if}}" +                                
                            "</div></li>{{/foreach}}" +
                            "</ul>",
         template, relVideosHTML;           


    $.ajax({
        url: options.apiURL,
        success: function(data) {
            template = Handlebars.compile(relatedVideosTemplate);
            relVideosHTML = template(data);
            $("#relVideos").html( relVideosHTML );  
        }               
    }); 
});

Its very likely the video still image (thumbnail) for some videos will return 404 and in that case I use onerror event on image tag to replace it with default thumbnail.

Is there a way to pass this default thumbnal value as object to handlebars block expression template ?

I don't want to amend the data object to have 'defaultThumb' property for all items. Like below...

for ( i = 0, max = data.items.length; i < max; i++) {
    // Adding new property to each item in data object
    data.items[i].defaultThumb = options.defaultThumb;
};

It seems to me amending data property in above loop is non efficient as the defaultThumb is same across all videos which return 404 for still(thumb) image.

mu is too short mu is too short · Accepted Answer · 2013-09-13T16:16:20

Why not set defaultVideoThumb once at the top level and then reference it as {{../defaultVideoThumb}} inside the loop? Something like this in the template:

<img
    {{#if videoStillURL}}src="{{videoStillURL}}"{{else}}src="{{../defaultVideoThumb}}"{{/if}}
    width="90" height="75"
    onerror="this.src='{{../defaultVideoThumb}}'
>

and then in the JavaScript:

data.defaultVideoThumb = '...';
var html = template(data);

Demo: http://jsfiddle.net/ambiguous/9ecx3/

How to read additional data within handlebars block expression template?

1 Answers