Шаблон HTML, отображающий дополнительный элемент шаблона при добавлении через Javascript - PullRequest
0 голосов
/ 28 декабря 2018

У меня есть шаблон HTML, который я заполняю, используя Javascript, когда вызывается событие загрузки, и по какой-то причине сам базовый шаблон отображается, несмотря на то, что он не является частью массива, через который я зацикливаюсь, и я не могу понять, почему.Из моего понимания шаблоны показываются только при добавлении к телу документа, но базовый шаблон отображается в дополнение к добавленным шаблонам (за исключением последнего, поскольку базовый шаблон занимает первое место), и я могу убедиться в этом, изменив данные в базовом шаблоне.,

Я не могу использовать решение jQuery, поскольку оно будет считываться в веб-представление iOS через функцию, которая принимает только чистый Javascript.

Мой код выглядит следующим образом, если кто-то может объяснить, почемуисходный шаблон показывает себя, я был бы очень признателен.Я искал решение, но ничего не нашел и думаю, что, может быть, я неправильно понимаю, как работает шаблон.

<script>
    var titles = ["Item1", "Item2", "Item3", "Item4", "Item5"];

    function addGalleryItem() {
        var template = document.querySelector("#galleryTemplate");
        var label = template.content.querySelector(".caption");
        var node;  

        for (var i = 0; i < titles.length; i++) {
            node = document.importNode(template.content, true);
            label.innerHTML = titles[i];
            document.body.appendChild(node);
        }
    }
</script>	
<html>
    <body onload="addGalleryItem()">
        <template id="galleryTemplate">
            <div class="galleryItem">
                <img class="galleryImage" src="img.png" alt="Unknown-1" width="275" height="183">
                <div class="caption">
                    <label></label>
                </div>
            </div>
        </template>
    </body>
</html>	

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

это так же просто, как:

<!DOCTYPE html>

, но я также думаю, что вы запрашиваете ярлык в неправильном месте:

for (var i = 0; i < titles.length; i++) {
    node = document.importNode(template.content, true);

    label = node.querySelector(".caption");     // should query here ?

    label.innerHTML = titles[i];
    document.body.appendChild(node);
}
0 голосов
/ 28 декабря 2018

Я думаю, единственное, что не так с вашим кодом, это то, что вы присваиваете innerhtml переменной 'label' после переменной 'node', поэтому правильный код:

for (var i = 0; i < titles.length; i++) {
        label.innerHTML = titles[i];
        node = document.importNode(template.content, true);
        document.body.appendChild(node);
    }

шаблон не рендерит, вашцикл выполняется 5 раз, так как в нем 5 элементов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...