Skip to content
View Engine for ExpressJS. Write your views using ES6 Template Strings. Simple, fast, extensible.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
sample
.eslintrc
.gitignore
LICENSE
README.md
layout.js
package.json

README.md

ES6Views

View Engine for ExpressJS. Write your views using ES6 Template Strings. Simple, fast, extensible.

Installation

npm install --save es6views

Usage

// where ever you setup your view engine for ExpressJS
const esviews = require("es6views")
esviews.viewEngine(app)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'es6')

Templates

First off, create your base layout which will hold all the common logic for your views

const Layout  = require("es6views").Layout

class MyLayout extends Layout {

    parse() {
        let markup = `<head>
            <title>${this._data.title}</title>
        </head>
        <body>`
        
        markup += [this.header(), this.content(), this.footer()].join("")
          
        markup += `</body>`
        
        this._markup = markup
    }
    
    header () {
        const data = this.data
        return `<header>${data.title}</header>`
    }
    
    content () {
        return ``
    }
    
    footer () {
        return `<footer>2008-${(new Date()).getFullYear() Dezine Zync Studios. All Rights Reserved.}</footer>`
    }
    
}

module.exports = MyLayout

Then, inside a page template, you can do the following:

const MyLayout = require('./mylayout.es6')

class Posts extends MyLayout {
    content () {
        const data = this.data
        const posts = data.posts
        
        return posts.map(post => {
            return `<article>${post.body}</article>`
        }).join("")
    }
}

module.exports = Posts

You can then use it in your route like so:

router.get('/posts', (req, res) => {
    let locals = Object.assign({}, res.locals, {
        posts: posts
    })
    res.render('projects', locals)
})
You can’t perform that action at this time.