Как jQuery append() с backquote (``) может пропустить / не отобразить строковую переменную?

Question

Я создаю несколько каруселей на веб-странице с помощью jQuery, вызывая всю необходимую информацию с YouTube с помощью API данных Youtube v3. После выполнения проектирования и функций я борюсь с одной простой вещью, которую я не могу понять.

я использую append(``) чтобы я мог добавить весь необходимый мне HTML-элемент к нужному элементу, а также вставить другую информацию с переменными в ${var} нотации.

Все работает отлично, за исключением одной строковой переменной preview, Это похоже на то, что оно не распознается как переменная и в конечном выводе отображается как строковый чанк. Теперь немного кода.

Это подготовка к вызову функции, которая загружает все:

jQuery(document).ready(function () {
    var apikey = 'my-api-key';
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
    var playlists = {
        1: 'PL549CFEF61BF98279',
        2: 'PLX_IxBH-yGtonzSE2zyplhI2oky7FWvbE',
        3: 'PL038B3F56D598DD61',
        4: 'PLDDFDDD10E5584056',
        5: 'PLD4F65416EB11640F',
    }

    loadVids(apikey, URL, playlists);
});

Следующие loadVids, для каждого вызова плейлиста YouTube getJSON() и получить данные:

function loadVids(apikey, URL, playlists) {
    for (const menuid in playlists) {
        var options = { part: 'snippet', key: apikey, maxResults: 20, playlistId: playlists[menuid] }
        jQuery.getJSON(URL, options, function (data) {
            resultsLoop(data, menuid, apikey);
        });
    }
}

затем resultLoop, используя each() помещает всю информацию в некоторый HTML-код, который будет добавлен где-то на веб-странице (я удалил все исходные атрибуты, чтобы сделать его читаемым).

function resultsLoop(data, menuid) {
    jQuery.each(data.items, function () {

        var alttext = this.snippet.title;
        var title = alttext.substring(0, 57) + '…'
        var vid = this.snippet.resourceId.videoId;
        var preview = this.snippet.thumbnails.standard.url;

        jQuery("#carousel-" + menuid + " ul")
        .append(`
<li>
    <article>
        <div>
            <a href="//www.youtube.com/watch?v=${vid}&fs=1&autoplay=0&rel=0">
                <img alt="${alttext}" src="${preview}">
            </a>
        </div>
        <div>
            <h4><a href="/index.php?Itemid=${menuid}" title="${alttext}">${title}</a></h4>
        </div>
    </article>
</li>
`);
    });
}

В конце концов <img> тег

<img alt="some text" src="/$%7Bpreview%7D">

Я попытался:

• изменить имя переменной
• консоль регистрирует его до, после append()без проблем
• typeof говорит, что это нормальная строка
• это дает мне одинаковый результат в каждом браузере

Я действительно не понимаю, что я делаю неправильно, и только preview не работает, все остальные переменные в append() работают правильно.

Answer 1

Почему вы не используете concat, как вы уже использовали для jQuery("# ​​carousel-" + menuid + " ul")!!

Пример: (Пожалуйста, используйте этот код для добавления и проверки, я использовал одинарную кавычку, а не обратную кавычку, так как она не принята проверкой js)

jQuery("#carousel-" + menuid + " ul").append('<li><article><div><a href="//www.youtube.com/watch?v=${vid}&fs=1&autoplay=0&rel=0"><img alt="'+alttext+'" src="'+preview+'"></a></div><div><h4><a href="/index.php?Itemid='+menuid+'" title="'+alttext+'">'+title+'</a></h4></div></article></li>');

и удалите все пробелы из строки добавления. Я надеюсь, что это то, что ищет.

Answer 2

Просто чтобы вы знали, все вышеперечисленное работает на странице Joomla.

Принимая весь код, кроме jQuery(document).ready(function(){...loadVids()...}и размещение в файле.js решило все проблемы.

Я думаю, что есть какой-то фильтр, который не позволит вам вводить внешние ресурсы, такие как https://i.ytimg.com/vi/lmuUD9_eDnY/sddefault.jpg на странице с одним только javascript (и это умно), но фильтр не ' применяется, если вы включаете файл.js в сам сайт.

Посредственный обходной путь для посредственного JavaScript-кода. Спасибо Рори в комментариях, которые дали мне некоторое представление.