Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edspencer/jaml
JavaScript Haml
https://github.com/edspencer/jaml
Last synced: 4 days ago
JSON representation
JavaScript Haml
- Host: GitHub
- URL: https://github.com/edspencer/jaml
- Owner: edspencer
- License: mit
- Created: 2009-10-20T11:16:05.000Z (about 15 years ago)
- Default Branch: master
- Last Pushed: 2015-11-30T23:44:52.000Z (almost 9 years ago)
- Last Synced: 2024-08-05T18:22:44.619Z (3 months ago)
- Language: JavaScript
- Homepage: http://edspencer.net/2009/11/jaml-beautiful-html-generation-for-javascript.html
- Size: 72.3 KB
- Stars: 510
- Watchers: 11
- Forks: 44
- Open Issues: 9
-
Metadata Files:
- Readme: README.textile
- License: LICENSE.txt
Awesome Lists containing this project
README
h1. Jaml: beautiful HTML generation for JavaScript
p. Jaml tries to emulate Ruby's Haml library, making it easy to generate HTML in your JavaScript projects.
h2. Examples
h3. Something Simple
Registering a template is easy:
bc.. Jaml.register('simple', function() {
div(
h1("Some title"),
p("Some exciting paragraph text"),
br(),
ul(
li("First item"),
li("Second item"),
li("Third item")
)
);
});
p. So is rendering it:
bc. Jaml.render('simple');
p. Here's the output (yes, the indentation really is that pretty):
pre.
Some title
Some exciting paragraph text
- First item
- Second item
- Third item
h3. Templating
p. Usually we want to inject data into templates - let's see how to do that:
bc.. Jaml.register('product', function(product) {
div({cls: 'product'},
h1(product.title),
p(product.description),
img({src: product.thumbUrl}),
a({href: product.imageUrl}, 'View larger image'),
form(
label({for: 'quantity'}, "Quantity"),
input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
input({type: 'submit', value: 'Add to Cart'})
)
);
});
p. And now to render it:
bc.. //this is the product we will be rendering
var bsg = {
title : 'Battlestar Galactica DVDs',
thumbUrl : 'thumbnail.png',
imageUrl : 'image.png',
description: 'Best. Show. Evar.'
};
Jaml.render('product', bsg);
p. Which gives us:
pre..
h3. Collections and partials
p. We can reuse templates inside other templates. Here we make a Category template to hold more than one product:
bc.. Jaml.register('category', function(category) {
div({cls: 'category'},
h1(category.name),
p(category.products.length + " products in this category:"),
div({cls: 'products'},
Jaml.render('product', category.products)
)
);
});
p. Now we render it with a couple of products:
bc.. //here's a second product
var snowWhite = {
title : 'Snow White',
description: 'not so great actually',
thumbUrl : 'thumbnail.png',
imageUrl : 'image.png'
};
//and a category
var category = {
name : 'Doovde',
products: [bsg, snowWhite]
}
Jaml.render('category', category);
p. Which gives us:
pre..
Doovde
2 products in this category:
h3. Error handling
p. If the requested template does not exist, the renderer will return null:
bc.. => Jaml.render('missing');
=> null
h3. Jaml Tests
p. You can run the Jaml test suite using either node.js at the command line or via a webpage-based runner.
h4. Run the tests in a browser
p. Jasmine must be checked out in a directory alongside jaml:
bc.. git clone https://github.com/pivotal/jasmine.git
ls
=> jaml jasmine
p. ...then open specs/index.html in your browser.
h4. Run the tests using node.js
p. 1) Install node.js.
p. 2) Check out sconover's jasmine-node alongside jaml:
bc.. git clone https://github.com/sconover/jasmine-node.git
ls
=> jaml jasmine-node
p. 3) Run the suite:
bc.. $ node specs/suite.js
Started
..........................
Finished in 0.018 seconds
X tests, Y assertions, 0 failures
