手把不在模板中

Question

我有一个车把的模板，我想使用它，但是当我使用时，我得到了所有的标签，但没有文字。这是我的HTML。

<script src="../static/js/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script id="template" type="text/x-handlebars-template">
        <li class="message">
            <h6>{{username}}</h6>
            <p>{{message}}</p>
            <p>{{date}}</p>
        </li>
    </script>

在main. js中

socket.on('message', data => {
        console.log('message recieved')
        console.log(data.channel)
        console.log(document.querySelector("#active").innerHTML)
        if (data.channel === document.querySelector("#active").innerHTML) {
            console.log(data.sent_by)
            console.log(data.message)
            console.log(data.time)
            var template = Handlebars.compile(document.querySelector('#template').innerHTML);
            console.log(document.querySelector('#template').innerHTML)
            const context = {'username' : data.sent_by,
                            'message' : data.message,
                            'date' : data.time,};
            var html = template(context);
            console.log(context)
            console.log(html)
            document.querySelector('#view-message').innerHTML += html
        } 
    })

所有的日志信息都在运行，所以套接字正在接收数据，if条件正在被触发。我在同一个项目的前一节中使用了handlebars，它在那里工作得很好，所以我不知道为什么它在这里不能工作。谢谢！我有一个handlebars模板，但我不知道为什么在这里不能工作。

Answer 1

移动你的脚本 <script src="../static/js/main.js"></script> 彻头彻尾