Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (70 sloc) 2.42 KB

HTML preprocessing

AbsurdJS could also act as a HTML preprocessor. It needs the calling of only one method morph.

api.morph("html").add({
	body: {
		'section.content#home': {
			nav: [
				{ 'a[href="#" class="link"]': 'A' },
				{ 'a[href="#" class="link"]': 'B' },
				{ 'a[href="#" class="link"]': 'C' }
			]
		},
		footer: {
			p: 'Text in the Footer'
		}
	}
}).compile(function(err, html) {
	console.log(html);
});

Every property defines a tag. The attributes of the tag could be defined in [...] as it is shown above. The HTML markup produced by the example is:

<body>
    <section class="content" id="home">
        <nav>
        	<a href="#" class="link">A</a>
        	<a href="#" class="link">B</a>
        	<a href="#" class="link">C</a>
        </nav>
    </section>
    <footer>
        <p>Text in the Footer</p>
    </footer>
</body>

Normally while you are generating HTML layouts you want to fill them with data. That's why AbsurdJS has its own template engine integrated. Let's check the following code:

var data = {
	name: 'AbsurdJS',
	features: ['CSS preprocessor', 'HTML preprocessor', 'Organic CSS'],
	link: function() {
		return '<a href="http://absurdjs.com">' + this.name + '</a>';
	}
}
api.morph("html").add({
	body: {
		h1: 'I\'m <% this.name %>!',
		section: {
			ul: [
				'<% for(var i=0; i<this.features.length; i++) { %>',
				{ li: '<% this.features[i] %>' },
				'<% } %>'
			]
		},
		footer: 'Checkout my website at <% this.link() %>'
	}
}).compile(function(err, html) {
	console.log(html);
}, data);

The generated HTML markup:

<body>
    <h1>I'm AbsurdJS!</h1>
    <section>
        <ul>
            <li>CSS preprocessor</li>
            <li>HTML preprocessor</li>
            <li>Organic CSS</li>
        </ul>
    </section>
    <footer>Checkout my website at <a href="http://absurdjs.com">AbsurdJS</a>
    </footer>
</body>

The dynamic parts and the instructions to the template engine are passed between <% and %> strings. The interesting thing is that there is no special syntax that you should learn. That's just a JavaScript. The code which you put there is executed in the context of the passed data. As you can see you may access a variable directly, create a for loop or even execute a function.

More about the engine and how it is implemented here.