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

Question

i am using hbs (express handlebars) to render a page. i would like to access some variables in chat.hbs to an external file let us say chat.js(client side)

server side

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

client side chat.hbs

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

I would like to access chatrrom id in an external js file for using socket.io

Answer 1

You can use ajax to fetch the template fetch('chat.hbs').then(r => r.text()); , you can share compiled function if that's what you want. Then you need handlebars for client if that express one don't work in browser.

so you code should look like this if used with handlerbars.js:

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

and then you can render the it with:

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

Answer 2

inside hbs file

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

i tried this which worked inside client side js file

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