在外部js文件中访问hbs变量

Question

我正在使用HBS（快速把手）来呈现页面。 我想访问chat.hbs中的一些变量到一个外部文件，让我们说chat.js（客户端）

服务器端

 res.render('chat', {chatroom,user}) 

客户端chat.hbs

    <div>
      <span id="chatroomid">{{chatroom._id}}</span>
      <span id="userid">{{user._id}}</span>
    </div>

我想使用socket.io访问外部js文件中的chatrrom id

Answer 1

您可以使用ajax来获取模板fetch('chat.hbs').then(r => r.text()); ，则可以共享编译后的函数。 然后，如果表示客户端在浏览器中不起作用，则需要客户端的把手。

因此，如果将其与handlerbars.js结合使用，则代码应如下所示：

var template = fetch('chat.hbs').then(r => r.text())
      .then(text => Handlebars.compile(text));

然后可以使用以下命令呈现它：

template.then(fn => {
   var html = fn({chatroom: {_id: 10}, user: {_id: 20}});
   // update DOM with html
});

Answer 2

内部HBS文件

      <div hidden>
            <span id="chatroomid" chatroomid ="{{chatroom._id}}"></span>
        </div> 

我尝试了在客户端js文件中工作的

 const $chatroomid = document.querySelector('#chatroomid')
 const chatroomId = $chatroomid.getAttribute('chatroomid')