https://github.com/dheeraj-br/ejs_layout_implementation

EJS does not support Blocks, This is a simulation of blocks in EJS using standard features of EJS and JS
https://github.com/dheeraj-br/ejs_layout_implementation

ejs ejs-docs ejs-express ejs-templates ejs-templating layout-engine

Last synced: about 1 month ago
JSON representation

EJS does not support Blocks, This is a simulation of blocks in EJS using standard features of EJS and JS

• Host: GitHub
• URL: https://github.com/dheeraj-br/ejs_layout_implementation
• Owner: dheeraj-br
• License: mit
• Created: 2019-12-24T16:02:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T13:03:07.000Z (almost 2 years ago)
• Last Synced: 2024-09-25T09:30:47.933Z (about 2 months ago)
• Topics: ejs, ejs-docs, ejs-express, ejs-templates, ejs-templating, layout-engine
• Language: HTML
• Size: 92.8 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# EJS layouts 

#### Install

`git clone https://github.com/dheeraj-br/ejs_layout_implementation.git`

`npm i`

navigate to `[localhost:3000]/users`

### Scenario

EJS does not support blocks; ergo, there is no concept of overriding / prepped / append to block.

The usual convention is to use `include()` to inject commonly used components into _each_ page, There usually is no concept of 'base' template.

### Aim

1). To simulate blocks in EJS using conventional methods of the templating engine and JavaScript

2). To avoid includes of commonly used components inside multiple pages, but instead to put those components in base template.

    eg: top navigation components needs to be included inside every single page of ejs

### Solution

* EJS `include()` method takes two arguments file name and an object, ```<%- include('base', {content: blog}); %>```

* It is possible to create JavaScript variables inside EJS. eg: ```<% let blog = `
 blurb 
` %>```


using the above two features, it is possible to imagine JavaScript variables as `blocks` that a child/base template can use as is or replace with a new value.

### Example

#### node/express:

```JavaScript

app.get('/admins', (req, res, next) => {

  return res.render('admins', {

    title: 'admins',

    path: '/admins',

    admin: 'Eddie Hall'

  });

});

```

#### admins.ejs

```JavaScript

<% let styles = `

    

    ` 

%>

<% let content = `

 

    
Admin: ${admin}





` %>


<%- include('base.ejs', {

    styles: styles, 

    content: content

}) %>

```

#### base.ejs

```JavaScript

  

    <%= title %>

    <%- styles %>

  

  

    


      Users

      Admin

    

    <%- content %>

  


```

        

* visit users.ejs for more conditional and looping structures

* visit base.ejs for overriding and appending / prepending to content variable

#### Explanation of example:

* app.js 

    * passes three values title, path, admin. 

    * title and path are meant to be used in base.ejs and admin is used in admins.ejs.

* admins.ejs

    * declares two variables styles and content

    * the two variables contain style tag and div tag respectively, they need to be enclosed in string literals.

    * Finally there is an includes call passing the two variables to base.ejs

* base.ejs

    * styles and content variables are passed to base.ejs from admins.ejs

    * base.ejs outputs the variables as html

#### Capabilities:

* the variables passed into the child/base can be manipulated with override / append / prepend.

* default variables declared in parent can be passed to child templates

* there is now a base template that holds common components eliminating multiple include statements.

* Simulates `Blocks` in EJS using standard conventions

* using looping structures to output array / objects

* using conditional structures to output data

#### Caveat: 

* since variable data must be enclosed inside string literals use of looping structures is limited (views need to hold minimal logic anyway)

* we are limited to using Array.prototype.map(), ternary operators, Object.keys(obj), Object.values(obj)

* we have to use partials if the looping structure is more demanding.

* it might be an eyesore to put structures inside string literals.