i have some some script which i saved in database for example-
<ul>
<li>Blog</li>
<li>Blog with sidebar</li>
<li>Blog post</li>
<li>Blog post with sidebar</li>
</ul>
when i print it in html page using node js application, it simply print it as STRING , i want it to work like actual html script ( as it work in some other language like php )
engine i am using to produce html page is flowing
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + "/views"));
According to the twig php documentation there is a raw filter http://twig.sensiolabs.org/doc/filters/raw.html which will mark the content as safe.
So I would suggest trying
{{ htmlResponseFromMongoDB | raw }}
However the twig.js implementation does not appear to support this filter https://github.com/justjohn/twig.js/wiki/Implementation-Notes
An alternative according to the docs is to turn off autoescape around that block.
{% autoescape false %}
{{item}}
{% endautoescape %}
How are you printing to html?
Try this:
app.get('/page1', function(req, res)
{
var fromdb = '<ul> \
<li>Blog</li> \
<li>Blog with sidebar</li> \
<li>Blog post</li> \
<li>Blog post with sidebar</li> \
</ul>';
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<html><head></head><body>');
res.write(fromdb);
res.end('</body></html>');
});
Related
I have a header.html and a footer.html which I would like to be rendered along with other views. I want to accomplish this using Node+Express.
I tried to render views in the following way but clearly it doesn't work:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.render('header');
res.render('home');
res.render('footer');
});
You have to set a template engine to your project.
You can use Swig for instance, it works very nice and it is well documented.
The example below, shows you how to set it and how you can call partial views from a layout or master page.
Install it by doing npm install swig --save on your project root.
You need to install an additional library called consolidate which acts as interface among different template engine libraries, it is kind of standard in express applications.
npm install consolidate --save
require the library in your main script with
consolidate = require('consolidate');
swig = require('swig');
Configure it as follows:
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views'); // set your view path correctly here
Then you can render a page as:
app.get('/', function (req, res) {
res.render('index', {});
});
(Example taken from Swig's author, Paul Armstrong github page)
Layout.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock %} - Example</title>
</head>
<body>
<header>
<h1>{% block title %}{% endblock %}</h1>
{% block header %}{% endblock %}
<nav>
<ul>
<li>Home Page</li>
<li>People</li>
</ul>
</nav>
</header>
<section role="main">
{% block body %}{% endblock %}
</section>
</body>
</html>
Index.html:
{% extends 'layout.html' %}
{% block title %}Home Page{% endblock %}
This way, you can decoupled your views as you need :)
When you are using pug, you can take an advantage of include feature, like #Kangcor suggestion
home.pug
html
head
include ./path/to/header.pug
title= title
body
...
include ./path/to/footer.pug
You can use Handlebars partial views
Here is a well documented library
https://handlebarsjs.com/guide/partials.html#basic-partials
Install hbs
https://handlebarsjs.com/installation/#npm-or-yarn-recommended
npm install handlebars
Configure Handlebars
// import library on the your start js file ie: app.js || index.js
let hbs = require('hbs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');
Create your partial views ie: header.hbs and footer.hbs on the partials directory
Create a file layout.hbs and you can call the partial view as follows
<div>
{{> header}}
{{> body}}
{{> footer}}
</div>
Then when calling
res.render("home", {});
home.hbs will be mapped as the body and the footer and header will be added to the layout.
I am using html views.
Is there a something like this? :
{{include head.html}}
index
</body>
</html>
What you are looking for is a templating engine, since you mentioned the {{ }}tags I am assuming you are using Hogan.js aka moustache(the javascript version).
The documentation can be found here and what you are specifically looking for is the partials section.
Please note, the default express app(if you select hogan) comes installed with the hjs module which does not support partials, you will need to install the hogan-express module and replace them.
A partial looks like so:
{{> head}}
index
</body>
</html>
Partials are sent from a get or post object like so:
res.render('index.html', {
partials: {
head: 'partials/head.html'
}
});
You are looking for a template engine for nodejs?
For example check here: http://node-modules.com/search?q=template+engine
I found the solution.
server.js
var hbs = require('hbs');
app.set('view engine', 'html');
app.engine('html', hbs.__express);
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
hbs.registerPartials(__dirname + '/views/'); <-------- include folder
index.html
Index.html includes head.html like this:
{{> head}}
index
</body>
</html>
If you do not want to use ejs or jade etc then you could do it with jquery. Put this code in index.html
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
i'm using html files instead of ejs, but the express engine is ejs
views
|
|--header.html
|--footer.html
|
|--index.html
I configured like
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
I render my index template by this:
res.render('index.html', {title: 'test'});
But how can i include header and footer.html in index.html
Similar posts
Node.js express: confuse about ejs template
Existing example which is not working
https://github.com/visionmedia/express/tree/master/examples/ejs
The original method for what you asked would be to use partials. Partials have since been removed, and replaced with the include function of EJS. This is how you would include a file:
<% include header.html %>
<% include footer.html %>
Any locals you pass to the rendered page will also be passed to an include. For example:
app.js
app.get('/', function(req, res) {
res.render(__dirname + '/index.html', {
string: 'random_value',
other: 'value'
});
});
index.html
<!DOCTYPE html>
<body>
<%= other %>
<% include content.html %>
</body>
content.html
<pre><%= string %></pre>
The resultant HTML you would get is:
<!DOCTYPE html>
<body>
value
<pre>random_value</pre>
</body>
newbie here, I want to display my sql query result into my ejs file but I don't know how to.
any help will be appreciated.
To use ejs, the Express render engine must be set.
app.engine('html', require('ejs').renderFile);
Then you can pass variables to templates a SQL query:
connection.query('SELECT 1', function (err, rows) {
res.render('file.html', {
'sql': rows
});
});
In your template, then you can use code like so:
<%= sql.property %>
and even use scripts inside tags:
<% sql.forEach(function(field){ %>
<%= field.property %>
<% }) %>
Use EJS template url and send sql results using:
.render()
i'm using nodejs + express + ejs and i am having a problem when i try to include another view.
When I try:
<% include dochead %>
I get 'unexpected identifier';
when i try:
<% include /admin/global/dochead %>
I get 'include is not defined';
What is going on?
Thanks
Try
<%- include ('dochead') %>
or
<%- include ('admin/global/dochead') %>
set
app.set('view engine', 'ejs');
app.set('views', 'YOUR CUSTOM VIEW FOLDER PATH FROM ROOT FILE');
I think here <% include /admin/global/dochead %> should be
<% include ../admin/global/dochead %>
or
<% include admin/global/dochead %>
depending on the location.
Also check the view engine you use
app.set('view engine', 'ejs');