NodeJS Ejs Variable Render HTML - node.js

You can output variables using ejs like so
PagesController.test = function() {
this.title = 'test'
this.render();
}
<title><%= title %></title>
However I tried including html in the variable and it just displays it as text. Is it possible to make it render as html?

You need this construct:
<%- title %>
That won't escape the contents of the title variable.

Related

How to render template from text?

I want to store in my database a large text from an HTML file that could have Twig directives such as double curly braces, pipes, etc. From that string, I want to render a Twig template and send it back to the client.
public function renderAction (Request $request) {
$text = "<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
{{SomeVariable}}
</body>
</html>";
$template = $this->render($text, $parameters);
return new JsonResponse(["status" => "ok", "template" => $template], 200);
}
When I try this I got an error, it seems like the first param from $this->render is always used as a path to a twig file but I will not be storing URI but the HTML file content in my database. Is there any way to render a twig template from a string?
I also tried using
$template = $this->get('twig')->createTemplate($text);
return new JsonResponse(["status" => "ok", "template" => $template], 200);
but the "template" prop is always empty when the client receives it
I am using Symfony 2.8.52 and PHP 5.6

hbs rendered site with handlebars.js in the script - nodejs

I use hbs to render my pages with partials for navigation and footers.
router.get('/test', function (req, res) {
return res.render('test');
});
On one page I have template that uses mustache.js. This template doesn't work as it should as the {{}} seems to be picked up on the hbs render. Below is a basic example that illustrates the error. If I load this as a static page with express I get "Joe is a Web Developer", if I render it with hbs I get "is a".
Are there any work arounds that wont involve me changing how all my pages are rendered?
<!doctype html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<script type="text/javascript" src="js/libs/mustache.js" ></script>
<script>
var view = {
name : "Joe",
occupation : "Web Developer"
};
function loadtemp(){
var output = Mustache.render("{{name}} is a {{occupation}}", view);
document.getElementById('person').innerHTML = output;
}
</script>
</head>
<body onload="loadtemp()" >
<p id="person"></p>
</body>
</html>
It was simple enough. I just had to escape the brackets with a \
So all it took was
\{{name}}

meteor with flow router layout is rendered twice

I don't know why but my layout is rendered two times.
Here is my index.html:
<head>
<title>title</title>
</head>
<body>
{{>layout}}
</body>
Here is my layout:
<template name="layout">
{{#if canShow}}
{{>Template.dynamic template=content}}
{{else}}
{{> loginButtons}}
{{/if}}
</template>
So here without route my template is display just one time.
Here is my route:
FlowRouter.route('/', {
action() {
BlazeLayout.render("layout", {
content: "home"
});
}
});
But with this route my template is display a second time.
This is my helpers, I think there is nothing to do with this problem but we never know.
Template.home.onCreated(function() {
this.autorun(() => {
this.subscribe('post');
});
});
Template.layout.helpers({
canShow() {
return !!Meteor.user();
}
});
Template.home.helpers({
cats() {
return Posts.find({});
}
});
you don't need to render layout in the body.
The router will take care of the rendering.
so, just have
<body>
</body>
or don't even have it at all.
Edit: Thanks to Keith, I have a better understanding of my problem. Here is his comment:
one thing to keep in mind, all the html you write in meteor isn't kept as html. It all gets converted to javascript. Things like index.html do not get pushed to the browsesr. Meteor just takes all the html you write converts it to javascript and renders what it needs to based on what your code says. This is how it knows todynamically change and rerender html
For things like changing title of the head or add meta etc, we can do it directely in the javascript.
ex: Meteor - Setting the document title

Jade helper for FontAwesome

I want to write some helper for FontAwesome in jade template in Express.js, so I did in app.js:
app.locals.icon = function(icon){ return '<i class="fa fa-' + icon + '"></i>'; };
and called in template:
block content
h1= title
p Welcome to #{title}
= icon('users')
however it returns me escaped HTML code. What is a good practise for writing this kind of helpers ? How to return raw HTML ?
Try with != operator
!= icon('users')
Refrence from http://jade-lang.com/
Unescaped buffered code starts with != and outputs the result of evaluating the JavaScript expression in the template. This does not do any escaping, so is not safe for user input.

How can I pass variable to ejs.compile

My bottom_index.ejs looks like that:
<div>The bottom section</div>
In my code I declare ejs:
ejs = require('ejs');
Then compile the function:
var botom_index_ejs =
ejs.compile(fs.readFileSync(__dirname + "/../views/bottom_index.ejs", 'utf8'));
and then call it to get rendered html:
botom_index_ejs()
It works fine!
Now I would like to change my template to:
<div><%= bottom_text %></div>
and be able to pass the parameter (bottom_text) to the bottom_index.ejs
How should I pass the parameters?
Thanks!
Parameters are passed to EJS template as a JS plain object. For your example it sholud be:
botom_index_ejs({ bottom_text : 'The bottom section' });
Update:
test.js
var fs = require('fs');
var ejs = require('ejs');
var compiled = ejs.compile(fs.readFileSync(__dirname + '/test.ejs', 'utf8'));
var html = compiled({ title : 'EJS', text : 'Hello, World!' });
console.log(html);
test.ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<p><%= text %></p>
</body>
</html>

Resources