Recent searches


No recent searches

How to pass variables from handlebar file to javascript file?

Answered


Posted Nov 21, 2023

Hello Team,

I want to access variables like sections, categories etc in script.js file. How can we achieve this?


2

6

6 comments

image avatar

Nicolas P.

Zendesk Customer Care

Hi Rajan.

We have built-in helper handlebars. 
See more in our doc: https://developer.zendesk.com/api-reference/help_center/help-center-templates/helpers/
 
Now, if I look at the handlebars documentation (https://handlebarsjs.com/guide/#what-is-handlebars), I can see that you can import handlebar.js and use it in your theme.
 
You will have to customize your theme. 
More info about theme customization in this article: https://support.zendesk.com/hc/en-us/articles/4408839332250
 
I hope it helps.

2


To pass variables from a Handlebars file to a JavaScript file (like script.js), you can follow these steps:


1. Declare the Variables in the Handlebars Template: In your Handlebars template file (let's say it's template. has), declare the variables you want to pass to script.js. For example:

<script>
   var sections = {{{sections}}}; // Use triple braces to avoid HTML escaping
   var categories = {{{categories}}};
</script>

Here, sections and categories are assumed to be JavaScript objects or arrays.

2. Render the Template with Data: When rendering your Handlebars template, pass the necessary data:

const templateData = {
   sections: JSON.stringify([...]), // Assuming sections is an array of objects
   categories: JSON.stringify({...}) // Assuming categories is an object
};
const template = Handlebars.compile(templateSource);
const html = template(templateData);
document.getElementById('container').innerHTML = html;

Ensure that you use JSON.stringify() to convert JavaScript objects or arrays to strings.

3. Access the Variables in script.js: Now, in your script.js file, you can access these variables:

console.log(sections); // Output the sections array/object
console.log(categories); // Output the categories array/object
 

By following these steps, you'll be able to pass variables from a Handlebars template to a JavaScript file. Remember, it's important to ensure that the variables are properly formatted and passed as needed, especially if they contain complex data structures like arrays or objects.

Here are the best Javascript online learning platforms:
1.  W3School    2. Iqra Technology   3. JavatPoint

1


  Hello, the answer is very interesting, I am just starting out in the world of programming. This way of passing variables with handlebar can be used to pass data from mongodb to chratjs. thank you for your time.

0


sorry this is my question: This way of passing variables with handlebar can be used to pass data from mongodb to chratjs.??

0


image avatar

Erica Girges

Zendesk Developer Advocacy

Hi Mario! You should be able to use handlebars to build charts with mongoDB and Chart.js. I would just be sure to reference Chart.js docs to be sure the format of the data your passing is what it's looking for. 
 
Also, without seeing what your data looks its hard to confirm but, if there is any nested objects to be sure you're accessing them appropriately before attempting to render the handlebars template with Chart.js.

1


Thank you very much for your response, I am going to try it following your recommendations.

1


Please sign in to leave a comment.

Didn't find what you're looking for?

New post