如何读取车把块表达式模板中的附加数据？答案

【问题标题】：How to read additional data within handlebars block expression template?如何读取车把块表达式模板中的附加数据？
【发布时间】：2013-09-13 12:45:56
【问题描述】：

我的 html 文档将包含 div 容器，该容器在执行时会填充有把手模板名称“relatedVideosTemplate”。

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

以下匿名函数将发出ajax请求并将数据传递给handlebar模板，该模板遍历数据对象中的所有项目以构建相关的视频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 );  
        }               
    }); 
});

某些视频的视频静止图像（缩略图）很可能会返回 404，在这种情况下，我在图像标签上使用 onerror 事件将其替换为默认缩略图。

有没有办法将此默认缩略图值作为对象传递给车把块表达式模板？

我不想修改数据对象以使所有项目都具有“defaultThumb”属性。如下图...

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;
};

在我看来，在上面的循环中修改数据属性是无效的，因为 defaultThumb 在所有视频中都是相同的，对于静止（拇指）图像返回 404。

【问题讨论】：

标签： javascript jquery templates handlebars.js

【解决方案1】：

为什么不在顶层设置一次defaultVideoThumb，然后在循环内将其引用为{{../defaultVideoThumb}}？模板中有这样的东西：

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

然后在 JavaScript 中：

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

演示：http://jsfiddle.net/ambiguous/9ecx3/

【讨论】：