In our webpack build, we have a file with ejs template:
<% switch (type) {
case 'homepage' : %>
<%- include partials/top -%>
<% break;
case 'amsterdam' : %>
<%- include partials/1 -%>
<% break;
case 'company' : %>
<%- include partials/2 -%>
<% break;
case 'new york' : %>
<%- include partials/3 -%>
<% break;
case 'paris' : %>
<%- include partials/4 -%>
<% break;
} %>
This works. But is it possible to remove all the <% and %> as the whole block is actually to be interpreted by <% %>.
I tried leaving only the first <% and the ending %> as shown below but the build fails suggesting a ejs linting error.
<% switch (type) {
case 'homepage' :
include partials/top
break;
case 'amsterdam' :
include partials/1
break;
case 'company' :
include partials/2
break;
case 'new york' :
include partials/3
break;
case 'paris' :
include partials/4
break;
} %>
Is it possible at all to remove all those <% %> ?
<% %> is for conditionnal statement or variable evaluation, to display you have to use <%= %> or <%- %> but those expect a value and not an expression
The only way to do it it's to include your switch in a function and return the result :
<% var a = 1; %>
<%- (function(){
switch(a){
case 1:
return include("c.ejs");
break;
case 2:
return include("d.ejs");
break;
default:
break;
}
})()
%>
Related
I have a view that is:
/views/signup.html
I want to have different elements on the page in my main layout template depending on what view is loading.
In my main layout file, when that specific view is rendered I want to do something like:
<% if (ecomHeader) { %>
<% include includes/signup-nav.html %>
<% } %>
<% else { %>
<% include includes/nav.html %>
<% } %>
This obviously doesn't work
ReferenceError: ../views/layout.html:9
7| </head>
8| <body>
>> 9| <% if (ecomHeader) { %>
10| <% include includes/signup-nav.html %>
11| <% } else { %>
12| <% include includes/nav.html %>
Can you do that? is that how that works?
render code:
...
let token = createCSRFToken(req);
let ecomHeader = true;
res.render('premium/signup', {
message: req.flash('signupMessage'),
token: token,
ecomHeader: true
});
...
There is a exports. thing that wraps this, not sure if thats relevant or not
You're else condition is missing certain things. Make sure you pass signup: true/false boolean from the back-end to your views.
res.render("main-template", {
signup: true/false
});
Then in your html, you need to do this - Make sure you use <%-.
<% if(signup){ %>
<%- include('includes/signup-nav.html'); %>
<% } else { %>
<%- include('includes/nav.html'); %>
<% } %>
I have next code in erb template:
<% if #proxy_cache_path.is_a?(Hash) -%>
<% #proxy_cache_path.sort_by{|k,v| k}.each do |key,value| -%>
proxy_cache_path <%= key %> keys_zone=<%= value %> levels=<%= #proxy_cache_levels %> max_size=<%= #proxy_cache_max_size %> inactive=<%= #proxy_cache_inactive -%>
<% end -%>
How to porting it for epp template? Im find very low information for it. Please help.
Here's how you can do that:
Showing an example class and how to declare both an ERB and EPP template for comparison:
# manifests/init.pp
class foo () {
$proxy_cache_path = {
'apples' => 1,
'bananas' => 2,
}
$proxy_cache_levels = 2
$proxy_cache_max_size = 2
$proxy_cache_inactive = 2
# Showing use of ERB:
file { '/foo':
ensure => file,
content => template('foo/mytemplate.erb')
}
# Showing use of EPP, which requires an explicit parameters hash:
file { '/bar':
ensure => file,
content => epp('foo/mytemplate.epp', {
'proxy_cache_path' => $proxy_cache_path,
'proxy_cache_levels' => $proxy_cache_levels,
'proxy_cache_max_size' => $proxy_cache_max_size,
'proxy_cache_inactive' => $proxy_cache_inactive,
}),
}
}
Corrected* contents of the ERB file for comparison:
# templates/mytemplate.erb
<% if #proxy_cache_path.is_a?(Hash) -%>
<% #proxy_cache_path.sort_by{|k,v| k}.each do |key,value| -%>
proxy_cache_path <%= key %> keys_zone=<%= value %> levels=<%= #proxy_cache_levels %> max_size=<%= #proxy_cache_max_size %> inactive=<%= #proxy_cache_inactive -%>
<% end -%>
<% end -%>
(*The code in the question is missing the closing end.)
Contents of EPP file:
# templates/mytemplate.epp
<%- | Hash[String, Integer] $proxy_cache_path, Integer $proxy_cache_levels, Integer $proxy_cache_max_size, Integer $proxy_cache_inactive | -%>
<% include stdlib -%>
<% $proxy_cache_path.keys.sort.each |$key| { -%>
proxy_cache_path <%= $key %> keys_zone=<%= $proxy_cache_path[$key] %> levels=<%= $proxy_cache_levels %> max_size=<%= $proxy_cache_max_size %> inactive=<%= $proxy_cache_inactive -%>
<% } -%>
Things to note about the EPP template file content:
1) The parameters and their types are defined on the first line of the template. Use of this line is optional, but good practice.
2) Since we declared the types on the first line, it is unnecessary and redundant to test if $proxy_cache_path is a Hash.
3) We need to include stdlib in order to access the functions keys and sort. This is different to Ruby (ERB) where these methods are built-in to the language.
4) I simplified the code relative to the Ruby (ERB) because Puppet (EPP) has no sort_by function - and actually there was no need to use it in the ERB either, which could be re-written as:
<% if #proxy_cache_path.is_a?(Hash) -%>
<% #proxy_cache_path.sort.each do |key,value| -%>
proxy_cache_path <%= key %> keys_zone=<%= value %> levels=<%= #proxy_cache_levels %> max_size=<%= #proxy_cache_max_size %> inactive=<%= #proxy_cache_inactive -%>
<% end -%>
<% end -%>
Finally some tests:
# spec/classes/test_spec.rb:
require 'spec_helper'
describe 'foo', :type => :class do
it 'content in foo should be the same as in bar' do
foo = catalogue.resource('file', '/foo').send(:parameters)[:content]
bar = catalogue.resource('file', '/bar').send(:parameters)[:content]
expect(foo).to eq bar
end
end
And the tests pass.
See docs here.
I am using EJS as my templating engine. I am passing variables from node js to ejs like...
router.get("/AdminDatabase", function(req, res) {
res.render('Pages/AdminDatabase', {title: 'WebFormsAdmin', role: 'System Admin' });
});
I am building a role base control and for this I want to change the header of the page base on the role of user.
<% include ../partials/Common/header_<%= role %> %>
The problem is with the above segment. How can I place the variable role inside this EJS code segment?
My header files are
header_System Admin.ejs,
header_Survey Admin.ejs,
header_Survey Taker.ejs
A workaround would be to do a conditional render like so:
<% switch (role) {
case 'System Admin': %>
<% include ./partials/header_System_Admin %>
<% break; %>
<% case 'Survey Admin': %>
<% include ./partials/header_Survey_Admin %>
<% break; %>
<% default: %>
<% include ./partials/header_Survey_Taker %>
<% break; %>
<% } %>
Note that the first case must be grouped with the switch declaration. Make sure the paths are correct for your partials.
You can concatenate the path and the variable.
<%- include('../partials/Common/header_'+role) %>
I want to create an alternating layout using the static site generator hexo – the text of every second post on an overview page should be on the right.
The partial I’m using needs to pass on a custom variable like textOrientation = "left" to the partial function.
<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
<%- partial('_partial/project-excerpt', {item: post}) %>
<% })%>
The template project_excerp.ejs then needs to generate the according classes bases on the passed variable.
My template (project_excerp.ejs):
<a class="???" href="/project/<%= item.slug %>"><%= item.title %></a>
So the questions are:
How can I extend the post variable with my own variable textOrientation and
How can I use an if then else in my project_excerp.ejs-template?
Okay, found a solution myself.
index.js:
<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
<% if(index % 2 === 0) { %>
<% post.textOrientation = "left"; %>
<% } else { %>
<% post.textOrientation = "right"; %>
<% } %>
<%- partial('_partial/project-excerpt', {item: post}) %>
project_excerp.ejs:
<% var projectInfoClass = "ta-right"; %>
<% if(item.textOrientation === "right") {%>
<% projectInfoClass = "ta-left"; %>
<% } %>
<a class="<%= projectInfoClass %>" href="/project/<%= item.slug %>"><%= item.title %></a>
Also helpful to read the EJS-docs.
I'm using <% include components/aside.ejs %> or <% include components/head.ejs %> somewhere in my code without any problem. But when I use include in a for loop like this
<%
for (var i = 0; i < 20; i++) {
include components/head.ejs;
}
%>
, I get Unexpected identifier in [file path] while compiling ejs.
Is there any obvious mistake that I'm not noticing?
To fix a breaking change, as of EJS 3.x, the syntax for an include has gone from <%- include components/head.ejs %> to <%- include('components/head.ejs'); %>.
You can try this one.
<% for (var i = 0; i < 20; i++){ %>
<%- include('component/footer') %>
<% }; %>
Include the template tags <% and %> on every line, like this:
<% for (var i = 0; i < 20; i++){ %>
<%- include components/head.ejs %>
<% }; %>