Permalink
Browse files

Update some examples

  • Loading branch information...
1 parent 1379a37 commit 5a794e883cae407caf708e731cc8c26a04aeda9b Forbes Lindesay committed Nov 12, 2013
View
@@ -1,8 +1,8 @@
-div#id.left(class='user user-' + name).container
+div#id.left.container(class='user user-' + name)
h1.title= name
form
//- unbuffered comment :)
// An example of attributes.
- input(type='text', name='user[name]', value=name)
+ input(type='text' name='user[name]' value=name)
input(checked, type='checkbox', name='user[blocked]')
input(type='submit', value='Update')
View
@@ -1,92 +0,0 @@
-<html>
- <head>
- <title>Jade</title>
- <script src="../jade.js"></script>
- <script>
-
- $ = function(id){
- return document.getElementById(id);
- };
-
- function template(name) {
- return $(name + '-template').innerHTML.trim();
- }
-
- function render(name, obj) {
- var html = template(name)
- , fn = render[name] = render[name] || jade.compile(html)
- , table = document.createElement('table')
- , tbody = document.createElement('tbody');
-
- table.appendChild(tbody);
- tbody.innerHTML = fn(obj);
- return tbody.firstChild;
- }
-
- var arr = []
- , pets = [];
-
- arr.push({ name: 'Tobi', species: 'Ferret', age: 2, siblings: ['Loki', 'Jane'] });
- arr.push({ name: 'Loki', species: 'Ferret', age: 1, siblings: ['Tobi', 'Jane'] });
- arr.push({ name: 'Jane', species: 'Ferret', age: 5, siblings: ['Tobi', 'Loki'] });
-
- var n = 500;
- while (n--) pets.push(arr[Math.random() * arr.length | 0]);
-
- onload = function(){
- var start = new Date
- , table = $('pets');
-
- pets.forEach(function(pet){
- var el = render('pet', { pet: pet });
- table.appendChild(el);
- });
-
- var duration = new Date - start;
- $('duration').textContent = 'rendered ' + pets.length + ' in ' + duration + 'ms';
- };
- </script>
- <style>
- body {
- padding: 60px;
- font: 16px/1.6 "Helvetica Neue", Helvetica, Arial;
- }
- table td.name {
- font-weight: bold;
- }
- table td.description,
- table td.siblings {
- font-weight: 200;
- letter-spacing: 1px;
- }
- table ul {
- margin: 0;
- padding: 0;
- }
- table ul::before {
- margin-left: 15px;
- content: 'Siblings: ';
- font-weight: bold;
- }
- table ul li {
- display: inline-block;
- list-style: none;
- margin: 0 3px;
- }
- </style>
- </head>
- <body>
- <span id="duration"></span>
- <table id="pets"></table>
-
- <script id="pet-template" type="text/template">
-tr.pet
- td.name= pet.name
- td.description is a #{pet.age} year old #{pet.species}
- td.siblings
- ul
- each sibling in pet.siblings
- li= sibling
- </script>
- </body>
-</html>
@@ -1,29 +0,0 @@
-<html>
- <head>
- <title>Jade</title>
- <script src="../jade.js"></script>
- <script>
- onload = function(){
- var html = document.getElementById('pet-template').innerHTML;
- var fn = jade.compile(html);
- var locals = { pet: { name: 'Tobi', species: 'Ferret', age: 2, siblings: ['Loki', 'Jane'] }};
- var html = fn(locals);
- document.getElementById('pets').innerHTML = html;
- };
- </script>
- </head>
- <body>
- <table id="pets"></table>
-
- <script id="pet-template" type="text/template">
-tbody
- tr.pet
- td.name= pet.name
- td.description is a #{pet.age} year old #{pet.species}
- td.siblings and has sibling(s)
- ul
- each sibling in pet.siblings
- li= sibling
- </script>
- </body>
-</html>
View
@@ -1,6 +1,5 @@
-// this expands to var title = "Things"
-title = "Things"
+- var title = "Things"
h1= title
View
@@ -1,6 +1,6 @@
html
- include includes/head
+ include includes/head
body
h1 My Site
p Welcome to my super lame site.
View
@@ -1,4 +1,4 @@
-!!! 5
+doctype html
html(lang="en")
head
title Example
View
@@ -1,5 +1,5 @@
-js = '<script></script>'
-!!! 5
+- var js = '<script></script>'
+doctype html
html
head

0 comments on commit 5a794e8

Please sign in to comment.