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条件。我在同一项目的上一节中使用过把手，在那儿工作正常，所以我不确定为什么它在这里不起作用。谢谢！

Answer 1

将脚本<script src="../static/js/main.js"></script>一直移到最底部

把手未填充模板

1 个答案: