If I'm using Handlebars as my templating engine with Express 4, it seems like there is only the option to specify a single layout template to use for all your views:
app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'layout.hbs'}));
What if your app needs multiple layouts? What if viewA.hbs uses one layout and viewB.hbs needs a different layout?
As I'm learning nodejs, I'm coming from a PHP Laravel background where the Blade templating engine has you specify which layout to use at the top of each view file. It makes it really simple to switch between layout templates for any given view.
You should be able to pass in the layout from your route/controller when you call the render method.
router.get('/', function(req, res) {
res.render('home', {layout: 'viewBLayout.hbs'});
});
I am pretty sure jade will let you switch layouts from inside the template but I don't know if you can do that with handlebars.
If you use express-hbs, you can specify a layout in the template with a comment like:
{{!< layout}}
Alternatively, you can try exphbs. It also supports layout comments and multiple layouts can be nested. (Disclaimer: I wrote it.)
make sure you first make two files named "main.handlebars" and "backend.handlebars" in /layouts directory:
Try this code for two routes if you want for example
router.get('/', function(req, res) {
res.render('home', {layout: 'main'});
});
router.get('/backend', function(req, res) {
res.render('home', {layout: 'backend'});
});
Related
I come from the PHP scenario, so this may be a wrong question.
I serve a page (templates with Handlebars) to client this way:
router.get('/', function(req, res) {
res.render('home');
});
and it works, but what if I need to divide my template in some different parts (so I'm able to reuse one of this in many different way)? For example, I have a template for header and one for footer.
Something like this:
router.get('/', function(req, res) {
res.render('header');
res.render('content');
res.render('footer');
});
How can I achieve this? Thanks.
Assuming you are using handlebars template rendering service, you can use partials.
http://handlebarsjs.com/partials.html
Code example: https://github.com/donpark/hbs/blob/master/examples/partial/views/index.hbs
The basic high level call stack follows like this:
res.render('page') ---> parses N of partials (recursively) --> html out
I have the following layout.jade file:
!!! 5
html
head
body
#left
#leftbody
#center
#centerbody
#container!= body
#right
#rightbody
And I have the following route.js file:
app.get('/',
function(req, res) {
Post.find({}).execFind(
function(err, data) {
res.render('post/index', {
posts: data
});
});
});
I'm currently rendering #centerbody based on links in the #leftbody. I'm wondering how I could use express to populate the #rightbody. Currently I'm populating a ul in #rightbody using an ajax call in document.ready but was wondering if there was another way using express.
I would strongly advise you to have a look at Jade includes, or, even better, Jade template inheritance
This would allow you to keep, for all your pages, the common parts of the page in separated files. And allow easier maintenance. This is definitely the thing to do.
I have a small express site written for node. I'm using Jade for layouts, and trying to get a handle on the new extends/block bits. When I use the standard layout/child view pattern list here, everything works great:
https://github.com/visionmedia/express/blob/master/examples/jade/views/layout.jade
I want to get fancy and use blocks to stuff custom html into specific parts of the master layout. So I transitioned over to something that looks more like this:
https://github.com/visionmedia/jade/blob/master/examples/extend-layout.jade
https://github.com/visionmedia/jade/blob/master/examples/extend.jade
Using the exact code in the extend-layout example above, my pages will always render the extend-layout.jade part, but never the content inside. Anything inside of a block never seems to get rendered. I've given this a try, but it doesn't help:
https://github.com/visionmedia/jade/issues/377
I'm running node 0.6.2, express 0.2.5, and jade 0.18. Any takers?
The layout config entry is deprecated now anyway with v3 of Express.
You can only use the block/extends style.
So I've figured out what was up. I was manually specifying the layout to use in express - I was setting it to the correct layout, but removing that line solved the problem. Example (for others who run into this):
exports.index = function(req, res){
res.render('index', { title: 'Express' }) // this works!
res.render('index', { title: 'Express', layout: 'layout' }) // this doesn't work
};
I would have expected a different behavior - including an explicit layout like this simply caused the child view to not render within the master layout.
I setup node and express then integrated the mustache.js template by following the instructions on this page:
http://bitdrift.com/post/2376383378/using-mustache-templates-in-express
So far so good, except I'm having a lot of trouble trying to setup mustache.js to have the same functionality as Jade's "layout". I'm basically trying to setup 1 master file to serve as a shell for my other pages similar to extending a template with Django.
Ex. The layout file could have this:
[html]
[title]my title[/title]
[body]{{content}}[/body]
[/html]
Where {{content}} gets replaced with the contents of a file which I would specify somehow in the route for that page.
I just have no idea how to set this up with express because I'm still a huge newbie with it and the way it's setup with Jade is automagical which seems to be specific to Jade only.
With Jade you just need to make a "layout.jade" file and have something like this as your route:
app.get('/', function(req, res) { res.render('home', { title: 'My home page' }); });
Then it magically adds the contents of home.jade into your layout.jade file wherever you specified the body!= body tag.
So yeah, how can I set something like that up with Mustache? If you know the answer please explain it step by step.
You could write a stache renderer plugin for docpad
I've got a layout - navigation menu. In express tutorials theres only old-school pages loading. whole old page is thrown away and a new one is downloaded with all layouts,views and partial views. And i want navigation menu to stay. So how can i do that?
If i'm maybe getting smth wrong with this web pages architecture please guide me.
As #drachenstern said, you want to render only partial HTML fragments, not whole documents including the layout. You can tell express to skip the layout using:
res.render('sometemplate', {layout: false});
If you want to look for Ajax requests as distinct from full-page browser loads, use the req.xhr flag as documented here
Thus you might even be able to do
res.render('sometemplate', {layout: !req.xhr});
You can also use res.partial() which is specifically for rendering partials.
Here is a sample of its usage, where 'browse.jade' is name of the template:
exports.browse = function(req, res){
var Contact = mongoose.model('Contact');
Contact.where({}).asc('surname', 'given_name', 'org').run(function(err, results) {
res.partial('browse', {
locals: { data: results }
});
});
};