2

私のhtmlドキュメントには、実行時にハンドルバーテンプレート名「relatedVideosTemplate」が取り込まれるdivコンテナがあります。

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

以下の無名関数は ajax リクエストを作成し、データ オブジェクト内のすべてのアイテムをループして関連するビデオ 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;
};

上記のループで data プロパティを修正することは効率的ではないようです。defaultThumb はすべてのビデオで同じであり、静止画像 (親指) に対して 404 を返します。

4

1 に答える 1