Need private packages and team management tools?Check out npm Teams »

es6views

1.1.2 • Public • Published

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

Install

npm i es6views

DownloadsWeekly Downloads

15

Version

1.1.2

License

MIT

Unpacked Size

26 kB

Total Files

9

Last publish

Collaborators

  • avatar