How to include html code in a view? - node.js

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.

Related

How to render express views dynamically

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

Including a partial within existing partial - Express and EJS

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

Create a new DOM element with EJS

I am rendering a view with the EJS template engine based on some dynamic variables. For example:
res.render("index", {
dynamicVariable: newEverytime
});
I am currently inserting it inside my HTML like so
<% if(someCondition){ %>
<div>
<%= dynamicVariable %>
</div>
<% } %>
I want EJS to create a new <a>tag every time as opposed to replacing my a tag each time. How can I achieve this?
EJS on the server side doesn't create any DOM nodes. It processes HTML source code as text. It just prints strings and it's the HTML parser on the client side that creates the DOM nodes from that.
I think you are asking about a strange solution to a problems that you say nothing about. It would b more useful to ask about the actual problems you're having, what have you tried so far and why it's not working.

Sails.js provide and yield blocks

In Ruby on Rails, there is a block called <% provide:titleName %> and <% yield:titleName %> that can be used to switch out text when rendering from page to page.
Is there an equivalent method in Sails.js that mimics this?
Yes there is if you use the standard ejs templating
IN the HTML file use:
<%= variablename %> //This will be replaced by the data in variablename
In the Controller method used to serve the view use:
res.view("viewname", {variablename: someValue});
I hope this is what you are looking for, let me know!

Printing HTML tags without escaping using EJS

I am using EJS with Node JS. Also I am using i18n-node-2 for multilingual site.
In my view I have a statement like this:
<h3 class="panel-title"><%= i18n.__("Business Card maker wizard - Step %s", "<span id='bcMakerStep'>1</span>") %></h3>
Here I want to output<span id='bcMakerStep'>1</span> as it is.
But the EJS is transforming it into Business Card maker wizard - Step <span id='bcMakerStep'>1</span> so that is displaying as it is.
Is there any way in EJS to print the tags as it is?
PS: I have tested without EJS to check whether i18n-node-2 is doing that, but it is not but EJS.
I just found out the answer,
If we use <%- instead of <%= it will print characters unescaped.
Thanks to Jakub Oboza at https://stackoverflow.com/a/10330401/721597

Resources