Question

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

服务器端

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": [ 
      "es6"
    ],
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "rootDir": ".",
    "sourceMap": true,
    "allowJs": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  },
  "exclude": [ 
    "node_modules",
    "coverage"
 ]
}

客户端chat.hbs

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

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

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')

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

2 个答案: