车把没有将内容加载到页面

Question

当我加载页面时，把手中的内容没有出现。但是当我检查控制台中的元素时，它写在那里但它没有显示出来。任何帮助将不胜感激。

index.html :

<script id="post-template" type="text/x-handlebars-template">
   {{#each post}}
     <ul>
       <li><img src="{{url}}"></li>
       <li>{{caption}}</li>
       <li>Username: {{author}}</li>
     </ul>
   {{/each}}
</script>

main.js :

function loadPeople() {
    fetch('people.json')
    .then(
        function(response) {
            return response.json();
        }
    )
    .then(
        function(data) {
            loadPost("post-template", data);
        }
    )
}

function loadPost (targetid, post) {
    let target = document.getElementById(targetid);
    let template = Handlebars.compile(document.getElementById("post-template").textContent);
    let list = template({'post': post});
    
    target.innerHTML = list;
}

window.onload = function() {
    loadPeople();
};

people.json :

[
    {
        "id": 1,
        "url": "art.jpg",
        "caption": "art",
        "author": "John Doe",
    }
]

Answer 1

const data = [
    {
        "id": 1,
        "url": "art.jpg",
        "caption": "art",
        "author": "John Doe",
    }
]


function loadPost (targetid, post) {
    let target = document.getElementById(targetid);
    let template = Handlebars.compile(document.getElementById("post-script").innerHTML);
    let list = template({'post': post});
 
   
    target.innerHTML = list;
}

loadPost("post-template", data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

<div id='post-template'></div>


<script id="post-script" type="text/x-handlebars-template">
   {{#each post}}
     <ul>
       <li><img src="{{url}}"></li>
       <li>{{caption}}</li>
       <li>Username: {{author}}</li>
     </ul>
   {{/each}}
</script>

这段代码对我有用，你有两个具有相同 ID 的元素。更改脚本的ID

车把没有将内容加载到页面

handlebars not loading the content to the page

html

javascript

handlebars.js