Coder Social home page Coder Social logo

layout and include about ejs HOT 36 OPEN

tj avatar tj commented on June 14, 2024
layout and include

from ejs.

Comments (36)

ralyodio avatar ralyodio commented on June 14, 2024 1

please add support for ejs layouts and partials in 3.x -- can't believe someone thought it was a good idea to remove it and require everyone to use jade for this functionality.

from ejs.

tj avatar tj commented on June 14, 2024

nope, not yet at least

from ejs.

dazoe avatar dazoe commented on June 14, 2024

I'd really like to start using express 3 but express 3 requires the templating engine (EJS) handle the layout and includes.

from ejs.

tj avatar tj commented on June 14, 2024

@dazoe you mean express 3

from ejs.

dazoe avatar dazoe commented on June 14, 2024

Yeah sorry.

from ejs.

tj avatar tj commented on June 14, 2024

yeah I'll have to come up with something for ejs, bring partial() back maybe but that doesn't help for layouts

from ejs.

AlgoTrader avatar AlgoTrader commented on June 14, 2024

I desperatly need ejs partials with express 3

from ejs.

yohjizzz avatar yohjizzz commented on June 14, 2024

I desperatly need ejs partials with express 3, me too.

from ejs.

slaskis avatar slaskis commented on June 14, 2024

@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.

from ejs.

yohjizzz avatar yohjizzz commented on June 14, 2024

@slaskis Thanks a lot.

from ejs.

sirwan avatar sirwan commented on June 14, 2024

I need this too TJ. +1

from ejs.

deremer avatar deremer commented on June 14, 2024

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.

from ejs.

RandomEtc avatar RandomEtc commented on June 14, 2024

I've been experimenting with https://github.com/publicclass/express-partials/ and have a pull request open with layout/include implementations at publicclass/express-partials#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!

from ejs.

ForbesLindesay avatar ForbesLindesay commented on June 14, 2024

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?

from ejs.

RandomEtc avatar RandomEtc commented on June 14, 2024

@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.

from ejs.

RandomEtc avatar RandomEtc commented on June 14, 2024

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

from ejs.

gagginaspinnata avatar gagginaspinnata commented on June 14, 2024

Please bring back ejs layout :(

from ejs.

tj avatar tj commented on June 14, 2024

ejs has includes now but yup i'll put some effort into the extends part soonish

from ejs.

ForbesLindesay avatar ForbesLindesay commented on June 14, 2024

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.

from ejs.

tj avatar tj commented on June 14, 2024

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()

from ejs.

ForbesLindesay avatar ForbesLindesay commented on June 14, 2024

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.

from ejs.

tj avatar tj commented on June 14, 2024

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

from ejs.

ForbesLindesay avatar ForbesLindesay commented on June 14, 2024

Sounds good to me.

from ejs.

nickpoorman avatar nickpoorman commented on June 14, 2024

It would be nice to have a layout.

from ejs.

fzaninotto avatar fzaninotto commented on June 14, 2024

Looking forward to seeing these two features in ejs soon. Any way we can help?

from ejs.

pixelfreak avatar pixelfreak commented on June 14, 2024

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.

from ejs.

jpravetz avatar jpravetz commented on June 14, 2024

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?

from ejs.

tj avatar tj commented on June 14, 2024

there's nothing improper about include, but yeah a partial() / layout would be nice

from ejs.

pixelfreak avatar pixelfreak commented on June 14, 2024

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

from ejs.

VTXCoder avatar VTXCoder commented on June 14, 2024

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.

from ejs.

medanat avatar medanat commented on June 14, 2024

I'd like to have layout brought back as well.

from ejs.

tj avatar tj commented on June 14, 2024

@chovy it has nothing to do with Jade... these are concepts that engines should provide, in their own opinionated ways

from ejs.

wemakeweb avatar wemakeweb commented on June 14, 2024

whats the status of this?

from ejs.

ForbesLindesay avatar ForbesLindesay commented on June 14, 2024

We've specified what we want, but that was 3 months back and I was hoping to get time to work on it but real life caught up. We have includes but not extends or partials as specced in #69 (comment) (and a few subsequent comments)

from ejs.

dctr avatar dctr commented on June 14, 2024

Use the "new way": http://hectorcorrea.com/blog/using-layouts-with-ejs-in-express-3-x

from ejs.

niftylettuce avatar niftylettuce commented on June 14, 2024

any update @visionmedia @ForbesLindesay?

from ejs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.