Get Started
1. Start an HTML page
<html><head></head><body></body></html>
2. Load the JS files
Add your favorite JS library: dojo, domassistant, extJS, jquery, mootools, prototype, sizzle, sly
and pure.js
<html><head><script src="jquery.js"></script><script src="pure.js"></script></head><body></body></html>
You can download them here
3. Add the HTML template
<html><head><script src="jquery.js"></script><script src="pure.js"></script></head><body><div class="template">Hello <a></a></div></body></html>
4. Fetch the data
<html><head><script src="jquery.js"></script><script src="pure.js"></script></head><body><div class="template">Hello <a></a></div><script>var jsonData = {who: 'BeeBole!',site: 'http://beebole.com'};</script></body></html>
5. Run PURE and transform the JSON in HTML
<html><head><script src="jquery.js"></script><script src="pure.js"></script></head><body><div class="template">Hello <a></a></div><script>var jsonData = {who: 'BeeBole!',site: 'http://beebole.com'},//template commandsdirective = { 'a':'who', 'a@href':'site' };//select the template and transform it$('div.template').render(jsonData, directive)</script></body></html>
6. The HTML result
The template:
<div class="template">Hello <a></a></div>
became:
<div class="template">Hello <a href="http://beebole.com">BeeBole!</a></div>
Without any crap or funny tags, just pure HTML, CSS and Javascript.
Grab the source code and start to play with it now!
