我的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事件将其替换为默认缩略图。
有没有办法将此默认的thumbnal值作为对象传递给把手块表达式模板?
我不想修改数据对象以使所有项具有'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。
答案 0 :(得分: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);