https://github.com/dzns/es6views

View Engine for ExpressJS. Write your views using ES6 Template Strings. Simple, fast, extensible.
https://github.com/dzns/es6views

engine es6 expressjs view

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dzns/es6views
• Owner: DZNS
• License: mit
• Created: 2015-09-19T14:03:54.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2022-12-02T06:36:36.000Z (about 2 years ago)
• Last Synced: 2024-11-20T06:13:23.675Z (about 1 month ago)
• Topics: engine, es6, expressjs, view
• Language: JavaScript
• Size: 30.3 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ES6Views

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

### Installation

```

npm install --save es6views

```

### Usage

```js

// 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

```js

const Layout  = require("es6views").Layout

class MyLayout extends Layout {

    parse() {

        let markup = `

            ${this._data.title}

        

        `

        

        markup += [this.header(), this.content(), this.footer()].join("")

          

        markup += ``

        

        this._markup = markup

    }

    

    header () {

        const data = this.data

        return `${data.title}`

    }

    

    content () {

        return ``

    }

    

    footer () {

        return `2008-${(new Date()).getFullYear() Dezine Zync Studios. All Rights Reserved.}`

    }

    

}

module.exports = MyLayout

```

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

```js

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

class Posts extends MyLayout {

    content () {

        const data = this.data

        const posts = data.posts

        

        return posts.map(post => {

            return `${post.body}`

        }).join("")

    }

}

module.exports = Posts

```

You can then use it in your route like so:

```js

router.get('/posts', (req, res) => {

    let locals = Object.assign({}, res.locals, {

        posts: posts

    })

    res.render('projects', locals)

})

```