I am using partials in my views but am wondering if it is possible to include another partial within an existing partial. It seems not at present but cannot find any information on if this is possible at present.
My current setup looks like this
views
partials
home
section1
file.ejs
partial.ejs
home.ejs
So within my home.ejs file I can include my partial.ejs partial
<% include partials/partial %>
But within my partial.ejs I can't seem to include another partial
<% include home/section1/file %>
Has anyone done this ?
Thanks
Related
I'm new to express JS and try to build CMS like this:
Users have a page builder, where they can drag-and-drop different components on the page.
each component has its own data which also is defined by a user
Each component has its own view template
So, I have to check what components have to load, prepare data for each of them, send this data to an appropriate template, render one big HTML and send to the client.
I know, It's too complicated to explain how to build this, but any tutorials, examples, resources would be appreciated.
IIUC, you can accomplish this using the include function that most template languages have. For the example, I'll use ejs. Also, I'm assuming you know how to get the data for user selections to your server.
on your app.js:
app.get('/someRoute', function(req, res) {
var data = //get user data here
res.render('someTemplate', {data:data});
});
someTemplate.ejs:
<%- include('header') %> //you should do this on every page
<% if (data == 'foo') { %>
<%- include('foo', {data:data}) %> //note that you can pass data to templates like this
<% } %>
<% if (data == 'bar') %>
<%- include('bar') %>
<% } %>
<% include('footer') %>
foo.ejs:
//some component here
If you want to read more, check the docs.
Hope this helps!
You can use Template Engine for that purpose because it enables you to use static template files in your application. At run time, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
Also check this link
So I'm having some trouble with my ejs templates. Below is how my file structure. In the file pages/index.ejs, I am importing the partials partials/ga.ejs. It works wonderfully. However, if I added the same partials code into another page.. such as pages/blog.ejs, it doesn't work anymore.
It's like I can't import a partial in more than once.
Below is the file structure:
EDIT; sorry, I forgot to include how I'm including it. So in the pages/index.ejs file:
<% if (showGoogleAnalytics) { %>
<% include ../partials/ga %>
<% } %>
I have severals views in my project let's say: "view1", "view2", "view3".
View engine is "ejs". For those views I have different scripts/css files. I have also partials like: header.ejs and footer.ejs, that I am including on the top of view(header) and bottom(footer):
As it is in the picture view1.ejs is using two stylesheets(styleA,styleB) and scripts(scriptA,scriptB).
When I am going to use another view with those static files everything is ok because I am including header.ejs and footer.ejs inside view.
But since I am using different stylesheets and scripts for another view, and I don't want to include "styleA" and "styleB" I have a problem. I just want to keep the same partials header and footer but with another links inside.
Is there any "Assets Manager" or another solution to manage all those links?
When I want to use header.ejs in over 20pages things getting complicate, because without solution of my problem, I need to include all links/styles and some of them are not necessary.
In express, you can pass styles and scripts as arrays to render your ejs template :
app.get('/', function (req, res) {
res.render('index', { styles: ['styleA.css', 'styleB.css'], scripts: ['scriptA.js', 'scriptB.js']});
});
Now update your ejs template. First the styles part :
<% styles.forEach(function(sty){ %>
<link href="<%- sty %>" rel="stylesheet">
<% });%>
Then, the scripts part :
<% scripts.forEach(function(scr){ %>
<script src="<%- scr %>"></script>
<% });%>
I am using ejs-locals to give me support for partials in express/node.js
The problem is the library has a bug when you include a partial within a partial. The 2nd partial include is trying to find the file relative to the grandparent or page.ejs that called the 1st partial.
So this requires I either flatten out my ./views so all files are only in ./views (no sub-dirs)...or I symlink to the partial from the directory that made the initial partial call.
Perhaps there is another/better way of doing this?
In a lot of my views, I have a face mash, that gives me html with people's avatars. I can't just use <% include faces %> and call it a day, because the collection of people comes from many different objects depending on the page from which it is called.
here's an example:
on an item page, I call <% include stats %>, which calls faces partial
<- partial('faces', { people: item.users }) %>
or on a list page, I call <% include stats %>, which calls faces partial
<- partial('faces' { people: list.users }) %>
The partial 'faces.ejs' just loops over people and spits out a link to their profile. But because I can't include a partial within a partial I'm stuck either sym-linking all over the place or trying something different.
./views/list/index.ejs calls a stats.ejs partial that calls faces.ejs partial...so I need to symlink ./views/list/faces.ejs to ./views/stats/faces.ejs for it to work.
You cannot pass data to a simple include, so I cannot pass in different collections of users depending on the context in which it was called.
<% include faces %> would require the face.ejs loop over either item.users or list.users hardcoded in faces.ejs
What else can I do that will work with nested partials/includes? I have filed a bug with ejs-locals, and a few others have as well, but its been a month w/o any fix.
I'm using express.js and EJS as template engine.
I don't understand how to use partials, I have seen at the examples but the author used JADE template engine, so I don't know how to apply it with EJS.
I have a simple view named: test.ejs and another .ejs file named part1.ejs
I need to show part1.ejs inside test.ejs.
I tried putting <% partial('part1', {}) %> (into test.ejs) but nothing happen, It does not include that file.
Could someone give me an example?
Thank you!
The correct code in your situation would be:
<%- partial('part1') %>
If you want to include unescaped HTML use <%- and if you want to escape HTML (unlinkely though when including a partial) you can use <%=.
Resources:
Node.js - EJS - including a partial
http://groups.google.com/group/express-js/browse_thread/thread/62d02af36c83b1cf
Its an old thread, but here is how you do it in the newer version of EJS.
<% include part1 %>
given part1.ejs contains the html you wish to include.