Can someone help me convert this EJS code to PUG? I'm trying to learn PUG and I'd like to implement this piece of code; it's for pagination. Everything works fine in EJS but I haven't quite grasped how to write conditionals and loops in PUG just yet . Below is a snippet of the code:
</div>
<% if (pages > 0) { %>
<ul class="pagination text-center">
<% if (current == 1) { %>
<li class="disabled"><a>First</a></li>
<% } else { %>
<li>First</li>
<% } %>
<% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
<% if (i !== 1) { %>
<li class="disabled"><a>...</a></li>
<% } %>
<% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
<% if (i == current) { %>
<li class="active"><a><%= i %></a></li>
<% } else { %>
<li><%= i %></li>
<% } %>
<% if (i == Number(current) + 4 && i < pages) { %>
<li class="disabled"><a>...</a></li>
<% } %>
<% } %>
<% if (current == pages) { %>
<li class="disabled"><a>Last</a></li>
<% } else { %>
<li>Last</li>
<% } %>
</ul>
<% } %>
</div>
All research I've done point me to either HTML to EJS or HTML to PUG, or vice versa. Any help will be much appreciated.
Related
<ul>
<% if ('contacts'.length) { %> <% 'contacts'.forEach(({ link, name }) => { -%>
<li>
<%= name %>
</li>
<% }) %> <% } %>
</ul>
I have a syntacxis problem with this part of ejs file.What would be the correct syntax?
I try ejslint,but he doesnt support me
I have an array
{"count":3,"rows":[{"p_id":"P1","gender":"M","patient_name":"a"},{"p_id":"D1","gender":"M","patient_name":"Davin"},{"p_id":"M1","gender":"M","patient_name":"Marv"}]}
Which I render from my express to my ejs file. I have a profile card in which I need to display each string in list. so for 3 strings 3 cards.
my ejs file:
<ul>
<% for(var i= 0 ; i < userData.length; i++) {%>
<li>
<span><%=userData[i].count %>
</li>
<ul>
<% for(var j=0 ; j < userData[i].rows.length; j++) {%>
<li>
<span><%=userData[i].rows[j].p_id %>
</li>
<% } %>
</ul>
<% } %>
</ul>
You haven't defined how you're rendering the EJS file so I'm going to guess that it's correct.
I'd suggest using the .forEach(...) function when looping through an array. See example below.
<% if (locals.userData) { %> <!-- Make sure userData is defined -->
<ul>
<% userData.forEach(user => { %> <!-- Loop through the array -->
<li>
<span><%= user.count %>
</li>
<ul>
<% user.rows.forEach(row => { %> <!-- Loop through the rows -->
<li>
<span><%= row.p_id %>
</li>
<% }); %>
</ul>
<% }); %>
</ul>
<% } %>
I'm trying to get the to add a number on the end based on the posts.length without creating duplicates.
enter code here
<h1>Home</h1>
<p> <%= startingContent %> </p>
<% let arr = []; %>
<% let i = 0; %>
<% while (i < posts.length) { %>
<% arr.push(i); %>
<% i++; %>
<% } %>
<% for(let i = 0;i < arr.length; i++) { %>
<% posts.forEach((post) => { %>
<div id='<%='product'+ `${arr[i]}` %>'>
<h1> <%= post.title %></h1>
<p> <%= post.content.substring(0, 100) + '...'; %>
<a href='/post/<%=post._id%>'>Read More</a>
</p>
</div>
<% }); %>
<% } %>
output:
<div id="product0">...</div>
<div id="product0">...</div>
<div id="product0">...</div>
<div id="product0">...</div>
<div id="product1">...</div>
...
...
etc...
What I trying to get:
<div id="product0">...</div>
<div id="product1">...</div>
<div id="product2">...</div>
<div id="product3">...</div>
Try changing this
<% for(let i = 0;i < arr.length; i++) { %>
<% posts.forEach((post) => { %>
<div id='<%='product'+ `${arr[i]}` %>'>
<h1> <%= post.title %></h1>
<p> <%= post.content.substring(0, 100) + '...'; %>
<a href='/post/<%=post._id%>'>Read More</a>
</p>
</div>
<% }); %>
<% } %>
to this
<% for(let i = 0;i < arr.length; i++) { %>
<div id='<%=`product${arr[i]}` %>'>
<% posts.forEach((post) => { %>
<h1> <%= post.title %></h1>
<p> <%= post.content.substring(0, 100) + '...'; %>
<a href='/post/<%=post._id%>'>Read More</a>
</p>
<% }); %>
</div>
<% } %>
I use sailsjs and ejs template engine to build my website. And I use bootstrap. I have found that the pager appears in almost of my pages. So I want to make it a component, which can be inserted into other ejs pages without pain. Because each pager has different jump urls but with the same page query, include keyword might not help from ejs.
How can I do it?
You can achieve this with a pattern like this
a template.ejs
<% if (typeof paginateurl != 'undefined' && typeof count != 'undefined') { %>
<div class="col-md-12 col-xs-12 col-lg-12">
<ul class="pagination col-md-8 col-xs-12 tcenter">
<% for (i = 1; i < totalpages; i++) { %>
<li <% if (i == currentpage) { %> class="active" <% } %>>
<%- i %></li>
<% } %>
</ul>
</div>
<% }%>
and by adding this in your listing template
<% include pagination %>
More complex example with next/prev button:
There is still some logic in this template, couse i have no time to refactor it. It is there to make it look more like this:
Prev 1 ... 3 4 5 6 7 ... 10 Next
<% if(pages > 1) { %>
<div class="prev">
<% if(page > 1) { %>
Prev
<% } %>
</div>
<div class="numbers">
<% if(page == 1) { %>
<span class='current'>1</span>
<% } else {%>
<a class='page' href="<%= link + linkDelimiter + 1 %>">1</a>
<% } %>
<% if((page - 2) > 1) { %>
...
<% } %>
<% var start = page - 1 %>
<% var end = page + 1 %>
<% var addToStart = end - pages %>
<% if (addToStart < 0) { %>
<% addToStart = 0 %>
<% }; %>
<% var addToEnd = 3 - end %>
<% if (addToEnd < 0) { %>
<% addToEnd = 0 %>
<% }; %>
<% for(var i=(start - addToStart); i <= (end + addToEnd); i++) {%>
<% if(i > 1 && i < pages) { %>
<% if(page == i) { %>
<span class='current'><%= i %></span>
<% } else { %>
<a class='page' href="<%= link + linkDelimiter + i %>"><%= i %></a>
<% } %>
<% } %>
<% }%>
<% if((page + 2) < pages) { %>
...
<% } %>
<% if(page == pages) { %>
<span class='current'><%= pages %></span>
<% } else { %>
<a class='page' href="<%= link + linkDelimiter + pages %>"><%= pages %></a>
<% } %>
</div>
<div class="next">
<% if(page < pages) { %>
Next
<% } %>
</div>
<% } %>
Is there any emacs mode that can format properly the ejs template file.
Sample EJS template file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<b> <%= doc.session_name %> </b>
<ul>
<% var p = {}; %>
<% var coinInitialPositions = [-1, -1]; %>
<% for (var i = 0; i < doc.moves.length; ++i) { %>
<% if (doc.moves[i].type === 'dice_values') { %>
<% if (typeof p[doc.moves[i].player] === 'undefined') { %>
<% p[doc.moves[i].player] = []; %>
<% } %>
<% p[doc.moves[i].player] = p[doc.moves[i].player].concat(doc.moves[i].values); %>
<% } %>
<li>
<%= i + " " + JSON.stringify(doc.moves[i]) %>
</li>
<% } %>
</ul>
<% for (var player in p) { %>
<li>
<b> <%= player + ": [" + p[player] + "]"%> </b>
<li>
<% } %>
</body>
</head>
You should look at web-mode.el which has very good compatibility with ejs