ejs
ejs copied to clipboard
tj
layout and include
I'd really like to start using express 3 but express 3 requires the templating engine (EJS) handle the layout and includes.
yeah I'll have to come up with something for ejs, bring partial() back maybe but that doesn't help for layouts
@AlgoTrader @yohjizzz you can use https://github.com/publicclass/express-partials if you're using ejs and express 3. It has partials and layout basically copied from express 2 into a middleware. It's far from perfect but it's a start.
I hacked a solution to this that works reasonably well for partials that are small (e.g., a navbar).
I put my partials in their own directory. When my Express app loads, I use fs.readFile to store all the partials in that directory (use fs.readDir) as a string and assign them to an app parameter (e.g., app.set('partials', myPartialsObj) ).
For dynamic content, I put in placeholders like #dynamictext# so that using route middleware I can do a .replace for "#dynamictext#" with as many of these as I need.
Then I pass the partials object to my view (e.g., res.locals.partials = app.set('partials') ) and then I can print the partials as necessary.
It works reasonably well as a hacky solution for very simple partials.
I've been experimenting with https://github.com/publicclass/express-partials/ and have a pull request open with layout/include implementations at https://github.com/publicclass/express-partials/pull/1
I also implemented something similar to https://github.com/aseemk/express-blocks and would like to take it further, perhaps using ideas from RENDER in #14. Feedback/assistance welcome!
Surely layout just involves having a new RenderFileForExpress method that looks like:
renderFile(fileName, options,function(err,result){
if(err) return cb(err);
options.body = result;
renderFile('layout.ejs', options, cb);
});
Partials would just be a case of creating a synchronous renderFile method and automatically passing that as a local to your render method? Do we need anything more complex?
@ForbesLindesay that's good pseudocode for the old layout feature - basically what express-partials offers. To be backwards compatible you want layout.ejs if options.layout is true or undefined, or to use the layout matching the name in options.layout (with correct extension) if the default layout is overridden.
I'm more interested in being able to specify the layout from within a template file, which requires executing the template and then seeing if it requested a layout. Other template engines call this inheritance, so I've implemented it as inherits('parent.ejs') in my express-partials fork. You can do this by rendering templates yourself and passing the results as locals to the top level template but it's nice to have the option to pull as well as push these arrangements, I think, and keep the final layout decisions entirely within templates.
The partial feature could be as simple as you describe (perhaps better name include for that incarnation?) but there are subtleties aside from needing a synchronous call. For example the express-partials implementation does a bit of work to generate an automatic variable name from the file name relative to the current template, and to find a template file from a given partial name (as name/index.ejs, _name.ejs, or ../name/index.ejs for example).
I can totally see why these features have been removed from core express, and made specific to the template engine. I hope we can find a way to get some of them into EJS as @visionmedia has for Jade, and also to make sure that the API for accessing the required app settings (view engine, views path, etc) is documented and stable before Express hits 3.0 final.
I finished up and published my fork of express-partials as ejs-locals - with support for layout, include, block and partial. Feedback welcome: https://github.com/randometc/ejs-locals/
update: fixed link
The way I implimented it in my fork of EJS (called QEJS) was to give the templates two local functions. These could be includes and extends. includes renders a child template and returns it, while extends just marks the fact that a given template extends another template.
<% extends('layout') %>
<%- include('child-template') %>
The include function obviously just needs to be a synchronous template renderer (or have some simple magic to make it look synchronous).
The extends function just looks like:
var extending = null;
function extends(tmpl) {
extending = templ;
}
Then you render function is aproximately:
renderFile(fileName, options,function(err,result){
if(err) return cb(err);
if (extending) {
options.contents = result;
renderFile(extending, options, cb);
} else {
cb(null, result);
}
});
I'm not sure how efficient this is, but it's very simple, and work could probably be done to optimise it.
the include I added is at compile time like jade so the sync IO doesn't matter, but it would be nice to still have a function and cache that sync read for more dynamic stuff, more like the old partial()
Yeh, I got round the problem by supporting asynchronous operations in the template, but I think doing it at compile time is probably much more efficient. I'm just proposing that sticking to the functional syntax is nice, less new stuff to learn syntax wise. That's what I like about EJS over mustache or Jade like templates.
yup, doing any IO at all is unnecessary in most cases. I agree though a simple function is nicer than some new concept. What I used to do with partials is that the first read was sync but all subsequent ones in production were cached, so it's convenient and more efficient than async anyway, we could do similar here without reworking all the internals
Looking forward to seeing these two features in ejs soon. Any way we can help?
Another upvote here. I am looking to upgrade to Express 3 soon. For now, should I rely on include or wait for a more proper implementation? Thanks.
Another upvote for layout and partials. The ejs locals package looks to be lightweight and sufficient, and adds some functionality. Thoughts on whether this functionality needs to be part of Express or can be farmed out to a separate module?
there's nothing improper about include, but yeah a partial() / layout would be nice
Sorry, didn't mean improper, I meant to say incomplete. Anyway, I have decided to learn Jade instead since that already has block/extend/include support
I have tried using the ejs-locals package and having numerous path issues and then used eddyystop pull which has different issues. Anyway this has stopped me in my tracks. I love how EJS has the same format as the client JS code (especially if you are using underscore templates on the client) and am not interested in using a different syntax such as Jade. Looking forward to having EJS working again in Express 3! Thanks. Unfortunately I am pretty new to node so can't contribute to the solution.
