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.
Related
I am using Node as the server side language and a mongodb database. I wanted to know how can you add the auto complete functionality in the search bar. For example, I have a property "materialCode" in my object and when I type in say "12" I want a drop down box showing all the materialCodes that start with 12 in that particular collection. Any help would be appreciated
Generally We will do that in front end. If you are using html5 then it can be easily done.(Assuming you are using any template engine or angular or react.) Get all the data from backend(node) using any service call (Say you stored data in allMaterialCode). Then loop through that allMaterialCode and send materialCode values to html5 dataList like below. (Bind materialCode by looping allMaterialsCode). (Assuming you are running node ejs server)
<input list="browsers">
<datalist id="browsers">
<%
var dataObj = ["12","1223","12456","12345","13322","9877"];
%>
<%
for ( let singleItem of dataObj ) {
%>
<option value='<%= singleItem %>'>
<%
}
%>
</datalist>
These links might help.
AutoCompleteHTMl SO
w3schools autocomplete
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
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!
I'm using EJS with a Node.js web server I'm building. I see many EJS examples that sometimes use <%= when outputting HTML or strings, while other examples (sometimes within the same template) use <%-.
I tried to reference the EJS docs and getting started guide, but both gave no info about the <%- notation. Also, my Google search attempts yielded nothing useful. Thanks!
The version of EJS you're likely using in Node is not the same as the version you see on Google code; in the Node version, <%= escapes the HTML going into the buffer, while <%- does not. source
From http://ejs.co/:
<% 'Scriptlet' tag, for control-flow, no output
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%= *param* %> is use for transfer data from view to controller and vice versa
while <%- %> is to include other code
For my project is
With <%= you if would render some variables that holds a string that holds HTML code, it would not render that HTML code but render it as text to avoid cross-site scripting attacks.
With a minus ( <%- ) you can avoid this, and really render the HTML code.
1)Option One: an ejs file is importing a variable called "noob" which holds for example a req.body value.
<p><%= noob %></p>
2)Option two: an ejs file importing a partial template called "myPartial.ejs" which is inside "partials" folder.
<p><%- include("./partials/myPartial") %></p>
3)Option three: an ejs file is using javascript code:
<p>
<% while (i < 10) { %>
myVar += "The number is " + i;
i++;
<% } %>
</p>
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.