Javascript 如何读取把手块表达式模板中的其他数据?

Javascript 如何读取把手块表达式模板中的其他数据?,javascript,jquery,templates,handlebars.js,Javascript,Jquery,Templates,Handlebars.js,我的html文档将有一个div容器,在执行时用Handlebar模板名“relatedVideosTemplate”填充该容器 <div id="relVideos"></div> 下面的匿名函数将发出ajax请求,并将数据传递给handlebar模板,该模板在数据对象中的所有项目上循环,以构建相关的视频UI (function(options) { var defualt = { defaultThumb: "/url/to/default

我的html文档将有一个div容器,在执行时用Handlebar模板名“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 );  
        }               
    }); 
});
(功能(选项){
var defualt={
defaultThumb:“/url/to/default/thumbnail/”,
APIRL:“/path/to/api/url”
};
选项=选项| |{};
选项=$.extend(真、默认、选项);
//相关视频转盘的把手模板
var relatedVideosTemplate:“相关视频”+
“
    ”+ “{{foreach items}}
  • ”+ "" + "" + “{{publishedDate}}”+ “{{{if playsTotal}}{{playsTotal}}视图{{/if}”+ “
  • {{/foreach}”+ “
”, 模板,relVideosHTML; $.ajax({ url:options.apiURL, 成功:功能(数据){ 模板=Handlebar.compile(relatedVideosTemplate); relVideosHTML=模板(数据); $(“#relVideos”).html(relVideosHTML); } }); });
很可能一些视频的视频静止图像(缩略图)将返回404,在这种情况下,我使用图像标签上的onerror事件将其替换为默认缩略图

是否有方法将此默认thumbnal值作为对象传递给Handlebar块表达式模板

我不想将数据对象修改为所有项都具有“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;
};
for(i=0,max=data.items.length;i

在我看来,在上面的循环中修改数据属性是无效的,因为defaultThumb在所有返回404静止(thumb)图像的视频中都是相同的。

为什么不在顶层设置一次
defaultVideoThumb
,然后在循环中引用它作为
{../defaultVideoThumb}
?模板中的类似内容:

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

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