coffee-views
Coffee Views was inspired by coffee-templates and coffeekup to add template inheritance to CoffeeScript templating.
Installation
npm i --save coffee-views
Example
# views/layout.coffee require 'coffee-views' module.exports = # The #render() method is automatically called when rendering the view in express. : @doctype 5 @html lang:'en'-> @head -> @title optionstitle @stylesheetBlock @body -> @h1 optionstitle @contentBlock : -> @link rel:'stylesheet'href:'/css/main.css' : ->
# views/myview.coffee Layout = require './layout' module.exports = : -> @div -> @p 'This is my view'
View = require './views/myview'view = consolelog viewcompile 'render'title: 'My Site'
... will produce ...
My Site My Site This is my view
Example 2 - in Express.js
# app.coffee # using the templates in the previous example # ... app = express appconfigure -> appengine 'coffee'require'coffee-views'engine appset 'view engine''coffee' appset 'views'pathjoin__dirname'views' # ... appget '/' resrender 'myview' title: 'My Site'
Inheriting methods
Just use CoffeeScript's native super()
method to return a rendered parent method.
: -> super @div -> @p 'This is an extension to "MyView"' view = consolelog viewcompile 'render'title: 'My extended view'###<!doctype html><html> <head> <title>My extended view</title> </head> <body> <h1>My extended view</h1> <div> <p>This is my view</p> </div> <div> <p>This is an extension to "MyView"</p> </div> </body></html>###
Plain ol' JavaScript
There's a possibility you may want to use plain JavaScript instead of CoffeeScript. In this case, just use Node's util module to extend your classes:
// layout.jsvar Html = Html util = ; {}moduleexports = Layout;util; Layoutprototype{ thisdoctype5; this; thisbody{ this; this; };}; Layoutprototype{};Layoutprototype{};
// myview.jsvar Layout = util = ; {}moduleexports = MyExtendedView;util; MyViewprototype{ this;};
// extendedview.jsvar MyView = util = ; {}moduleexports = ExtendedView;util; ExtendedViewprototype{ ExtendedViewsuper_prototypecontentBlock; this;};
Registering XML Tags
When creating your own XML tags you can register them like so:
# my-xml.coffee require 'coffee-views' MyXmlregisterTag 'mung'MyXmlregisterTag 'face'MyXmlregisterOpenTag 'this-is-always-open'MyXmlregisterClosedTag 'this-is-always-closed'
# your-xml.coffee MyXml = require './my-xml' : -> @mung -> @face 'yay, custom tags' @'this-is-always-open' @'this-is-always-closed' # <mung><face>yay custom tags</face></mung> # <this-is-always-open></this-is-always-open> # <this-is-always-closed/>
Registered HTML Tags
Apart from the obvious HTML5 compliant tags, here are a few extras.
The JavaScript Tag
Using the #javascript()
function will create a <script>
tag with the passed function as a string.
: -> @javascript -> alert 'Yay! CoffeeScript' view = consolelog viewcompile 'javascriptBlock'###<script>(function () { alert('Yay! CoffeeScript!');}).call(this)</script>###
You can also pass server variables through to your client code:
: # Assuming "options" is {username:'Craig David'} @javascript optionsusername alert "Your name is . Lucky you. *snigger*" @javascript options alert "Name: " @javascript -> 'Craig David' alert "getting name... "
... will produce ...
CSS
The #css()
method renders as CCSS. Pass an object and it will create a <style>
tag.
: -> @css form: input: padding: '5px' border: '1px solid' view = consolelog viewcompile 'stylesheetBlock'###<style>form input { padding: 5px; border: 1px solid;}</style>###
The Literal Tag
Using the #lit()
method will just add any content to the output string:
: -> @lit '<wierdtag/> Mung' view = consolelog viewcompile 'contentBlock'###<wierdtag/> Mung###
The Unliteral Tag
Using the #unlit()
method will escape content if #safeOutput is set to true (which it is by default).
: -> @unlit '<wierdtag/> Mung' view = consolelog viewcompile 'contentBlock'###<wierdtag/> Mung###
Escaping content on the fly
If you want to make sure something is escaped, go ahead and use the #escape() method:
escapedContent = @escape '<mung>' # => '<mung>'
Comments
HTML comments.
@comment 'Here\'a a comment'@comment -> @p 'I\'ve been a commented out'
IE Specific comments
@ie -> @link rel:'stylesheet'href:'ie.css'@ie 7-> @link rel:'stylesheet'href:'ie7.css'