Skip to content

Commit 213dd27

Browse files
alexgorbatchevalexgorbatchev
committed
Initial commit
0 parents  commit 213dd27

18 files changed

+264
-0
lines changed

Diff for: ‎dust/index.dust

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{>layout/}
2+
3+
{<body}
4+
<ul class="todos">
5+
{#todos}
6+
{#stream}
7+
{>item_partial/}
8+
{/stream}
9+
{/todos}
10+
</ul>
11+
{/body}

Diff for: ‎dust/item_partial.dust

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<li>
2+
<label for="item_{$idx}">
3+
<input id="item_{$idx}" type="checkbox" {?checked}checked{/checked}/>
4+
<span>{title}</span>
5+
</label>
6+
</li>

Diff for: ‎dust/layout.dust

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/style.css"/>
4+
</head>
5+
6+
<body>
7+
<h1>Mustache.js Template Example</h1>
8+
9+
{+body/}
10+
</body>
11+
</html>

Diff for: ‎ejs/index.ejs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/style.css"/>
4+
</head>
5+
6+
<body>
7+
<h1>EJS Template Example</h1>
8+
9+
<ul class="todos">
10+
<% todos.forEach(function(item, index) { %>
11+
<% include item_partial %>
12+
<% }) %>
13+
</ul>
14+
</body>
15+
</html>
16+

Diff for: ‎ejs/item_partial.ejs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<li>
2+
<label for="item_<%= index %>">
3+
<input id="item_<%= index %>" type="checkbox" <%= item.checked ? "checked" : "" %>/>
4+
<span><%= item.title %></span>
5+
</label>
6+
</li>

Diff for: ‎index.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
var express = require('express');
2+
var fs = require('fs');
3+
var todos = require('./todos.json');
4+
var jade = require('jade');
5+
var mustache = require('mustache');
6+
var dust = require('dustjs-linkedin');
7+
var ejs = require('ejs');
8+
var nunjucks = require('nunjucks');
9+
10+
var app = express();
11+
12+
app.use(express.static(__dirname + '/public'));
13+
14+
app.get('/jade', function(req, res) {
15+
var options = {todos: todos};
16+
res.send(jade.renderFile('./jade/index.jade', options));
17+
})
18+
19+
app.get('/mustache', function(req, res) {
20+
var template = fs.readFileSync('./mustache/index.mustache', 'utf8');
21+
var partials = {
22+
item: fs.readFileSync('./mustache/item_partial.mustache', 'utf8')
23+
};
24+
var locals = {todos: todos};
25+
res.send(mustache.render(template, locals, partials));
26+
});
27+
28+
app.get('/dust', function(req, res) {
29+
function register(name) {
30+
var template = dust.compile(fs.readFileSync('./dust/' + name + '.dust', 'utf8'), name);
31+
dust.loadSource(template);
32+
}
33+
34+
register('index');
35+
register('layout');
36+
register('item_partial');
37+
38+
var delay = 1;
39+
40+
var locals = {
41+
todos: todos,
42+
stream: function(chunk, context, bodies) {
43+
return chunk.map(function(chunk) {
44+
setTimeout(function() {
45+
chunk
46+
.render(bodies.block, context)
47+
.end();
48+
}, delay++ * 1000);
49+
});
50+
}
51+
};
52+
53+
dust
54+
.stream('index', locals)
55+
.on('error', function(err) {
56+
console.log(err.message);
57+
res.send(err.message);
58+
})
59+
.pipe(res)
60+
;
61+
});
62+
63+
app.get('/nunjucks', function(req, res) {
64+
var locals = {todos: todos};
65+
nunjucks.render('./nunjucks/index.html', locals, function(err, result) {
66+
if(err) {
67+
return res.send(err.message);
68+
}
69+
res.send(result);
70+
});
71+
});
72+
73+
app.get('/ejs', function(req, res) {
74+
var template = fs.readFileSync('./ejs/index.ejs', 'utf8');
75+
var options = {
76+
filename: './ejs/index.ejs',
77+
todos: todos
78+
};
79+
res.send(ejs.render(template, options));
80+
});
81+
82+
app.get('/eco', function(req, res) {
83+
84+
});
85+
86+
app.get('/haml', function(req, res) {
87+
88+
});
89+
90+
app.listen(3000);
91+
console.log('Example is listening on http://127.0.0.1:3000');

Diff for: ‎jade/index.jade

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
mixin todos(items)
2+
ul.todos
3+
each item, index in items
4+
li: include item_partial
5+
6+
extends template
7+
8+
block body
9+
+todos(todos)

Diff for: ‎jade/item_partial.jade

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
label(for="item_#{index}")
2+
input(id="item_#{index}" type="checkbox" checked=item.checked)
3+
span= item.title

Diff for: ‎jade/template.jade

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
doctype html
2+
html(lang="en")
3+
head
4+
title Jade Template Example
5+
link(rel="stylesheet" href="/style.css")
6+
body
7+
h1 Jade Template Example
8+
9+
block body

Diff for: ‎mustache/index.mustache

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/style.css"/>
4+
</head>
5+
6+
<body>
7+
<h1>Mustache.js Template Example</h1>
8+
<ul class="todos">
9+
{{#todos}}
10+
{{>item}}
11+
{{/todos}}
12+
</ul>
13+
</body>
14+
</html>

Diff for: ‎mustache/item_partial.mustache

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<li>
2+
<label for="item_{{@index}}">
3+
<input id="item_{{@index}}" type="checkbox" {{#checked}}checked{{/checked}}/>
4+
<span>{{title}}</span>
5+
</label>
6+
</li>

Diff for: ‎nunjucks/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% extends "./nunjucks/layout.html" %}
2+
3+
{% macro todos_macro(items) %}
4+
<ul class="todos">
5+
{% for item in items %}
6+
{% include "./nunjucks/item_partial.html" %}
7+
{% endfor %}
8+
</ul>
9+
{% endmacro %}
10+
11+
{% block body %}
12+
{{ todos_macro(todos) }}
13+
{% endblock %}

Diff for: ‎nunjucks/item_partial.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<li>
2+
<label for="item_{{ loop.index }}">
3+
<input id="item_{{ loop.index }}" type="checkbox" {{ "checked" if item.checked }}/>
4+
<span>{{ item.title }}</span>
5+
</label>
6+
</li>

Diff for: ‎nunjucks/layout.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/style.css"/>
4+
</head>
5+
6+
<body>
7+
<h1>Nunjucks Template Example</h1>
8+
9+
{% block body %}{% endblock %}
10+
</body>
11+
</html>

Diff for: ‎package.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "javascript-template-examples",
3+
"dependencies": {
4+
"dustjs-linkedin": "^2.4.2",
5+
"eco": "^1.1.0-rc-3",
6+
"ejs": "^1.0.0",
7+
"express": "^4.10.1",
8+
"haml": "^0.4.3",
9+
"jade": "^1.7.0",
10+
"mustache": "^0.8.2",
11+
"nunjucks": "^1.1.0"
12+
}
13+
}

Diff for: ‎public/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/style.css"/>
4+
</head>
5+
6+
<body>
7+
<h1>Template Examples</h1>
8+
<ul>
9+
<li><a href="/jade">Jade</a></li>
10+
<li><a href="/mustache">Mustache.js</a></li>
11+
<li><a href="/dust">Dust.js</a></li>
12+
<li><a href="/nunjucks">Nunjucks</a></li>
13+
<li><a href="/ejs">EJS</a></li>
14+
<li><a href="/eco">Eco</a></li>
15+
<li><a href="/haml">Haml.js</a></li>
16+
</ul>
17+
</body>
18+
</html>

Diff for: ‎public/style.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
font-size: 1.5em;
3+
font-family: Georgia;
4+
padding: 2em;
5+
}
6+
7+
ul.todos {
8+
margin: 0;
9+
padding: 0;
10+
list-style-type: none;
11+
}
12+
13+
ul.todos input[type=checkbox] {
14+
margin-right: 1em;
15+
}

Diff for: ‎todos.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[
2+
{ "title": "Do some nerdy stuff" },
3+
{ "title": "Redesign website", "checked": true },
4+
{ "title": "Learn new Node.js framework" },
5+
{ "title": "Submit patch to Angular.js", "checked": true }
6+
]

0 commit comments

Comments
 (0)