CODEWITHSUNDEEP
ejs
Orkun
Orkun

Reputation: 7258

how to include a template with parameters in EJS?

As a real beginner in EJS, I have two charts in my html page, so I want to use my partial twice:

<% include partials/spider-chart.ejs %>

But I need to pass some parameters inside the ejs to differentiate between graphs.

What is the best way?

Upvotes: 54

Views: 75525

Answers (4)

akzarma
akzarma

Reputation: 189

This is the best workaround by just passing the view file name as a context while rendering the base ejs file.

/base.ejs:

<html>
    <%- include(content) %>
</html>

/extra.ejs:

<div> some content which is to be added in base ejs file </div>

/controller.js:

res.render('base', { content: 'extra' })

Upvotes: 0

Hadi Mir
Hadi Mir

Reputation: 5133

You can pass single as well as multiple data here is how to do it

In render funtions

We can pass multiple data as an object like this

app.get("/account", function(req, res) {
  res.render("account", {
    name: 'Jon Snow',
    age: 35
  });
});

And then can access the data inside account using ejs simple template tags like this

<h2> hello <%= name %> </h2> <p> your age is <%= age %> </p>

In Partial views

Pass the data like this

<%- include('partials/logout', {name='triyon'}) %>

And access it like we did above

<h2> logged out <%= name %> </h2>

Upvotes: 16

Zubair Alam
Zubair Alam

Reputation: 8947

@Naeem Shaikh solution works. Though include also gives you more intuitive way of including a partial template and also passing context variables to that as found in documention section of ejs.

<ul>
  <% users.forEach(function(user){ %>
      <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

Upvotes: 141

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

I think you want to render two different charts using same partial ejs template, just by providing different data(within the main ejs file).

You can just define a variable, which will be assigned to the data, which the first chart will use, than include the chart.ejs file, again change the data, and include the partial ejs file(chart.ejs) again, so now you have two files which can use same variable(data), but can plot different chart based on value assigned to data.

For Example:

<% var data= 'data to be used by first chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

// re-initializing data for second chart
<% data= 'data to be used by second chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

where your spider-chart.ejs file could be something which will use data

spider-chart.ejs

    <li>
        <%= data %> // just an example
    </li>

here, as you use data, the data variable accessed by both charts will be different because you are reassigning values for data before every chart.

Upvotes: 34

Related Questions