New unified template system
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
test
.eslintrc
.gitignore
.jshintrc
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

NUTS

WORK IN PROGRESS

New unique templates system

Build Status

Installation

npm install nuts

Example

templates.html:

<section id="blog" nut="blog">
	<h1 nu-model="title"></h1>
	<article nu-as="blogPost" nu-repeat="articles"></article>
</body>


<article nut="blogPost">
	<h1 nu-model="title"></h1>
	<ul nu-each="related">
		<li nu-model></li>
	</ul>
</article>

myfile.js

var nuts = require( 'nuts' );

var data = {
	title: 'Frontier Psychiatrist',
	articles: [{
		title: 'You are a nut',
		related: ['nuts', 'crazy']
	},{
		title: 'That boy needs therapy',
		related: ['psychosomatic', 'hypnotized']
	}]
};

nuts
.addFile( 'templates.html' )
.exec( function (err) {
	if (err) { throw err;}

	var rendered = nuts.render( 'blog', data );
	console.log( rendered );
});

results in:

<section id="blog">
    <h1>Frontier Psychiatrist</h1>
    <article>
        <h1>You are a nut</h1>
        <ul>
            <li>nuts</li>
            <li>crazy</li>
        </ul>
    </article>
    <article>
        <h1>That boy needs therapy</h1>
        <ul>
            <li>psychosomatic</li>
            <li>hypnotized</li>
        </ul>
    </article>
</section>

Tag reference

  • Negations are not inplemented yet

Asignation

nut

nut property identify tags as nut templates

<span nut="superSpan">you are a nut!</span>
nuts.render( 'superSpan' );
// => '<span>you are a nut!</span>'

Scopes

nu-model

Specify tag content from scope property with nu-model keyname. Default tag content will be printed if there is no data in the model.

Example:

<span nut="modelExample" nu-model="words">mustaches are for hipsters</span>

With data:

nuts.render( "modelExample", { words: "nuts don't use mustaches" });
// => '<span>nuts don't use mustaches</span>'

Without data:

nuts.render( "modelExample" );
// => '<span>mustaches are for hipsters</span>'

nu-scope

Specify tag scope

Example

<section nut="news">
	<p nu-model="intro"></p>
	<article nu-scope="article">
		<h1 nu-model="title"></h1>
		<p nu-model="entry"></p>
	</article>
</section>
nuts.render( 'news', {
	intro: 'Sometimes a parrot talks.',
	article: {
		title: 'Some birds are funny when they talk',
		entry: 'A man with a golden eyeball and tighten your buttocks.'
	}
});

results in:

<section nut="news">
	<p>Sometimes a parrot talks.</p>
	<article>
		<h1>Some birds are funny when they talk</h1>
		<p>A man with a golden eyeball and tighten your buttocks.</p>
	</article>
</section>

nu-inherit

Extend scope with selected or all properties from parent scope.

Example:

Having this model:

nuts.render( 'inheritExample', {
	fruit:{
		name: 'Walnut',
		provider: 'tree',
		specs: {
			model: 'nut'
		}
	}
});

Without selecting any property

<article nu-scope="fruit" nut="inheritExample">
	<h1 nu-model="name"></h1>
	<div nu-scope="specs" nu-inherit>
		<span nu-model="provider"></span>
		<span nu-model="model"></span>
		<span nu-model="name"></span>
	</div>
</article>

results in:

<article>
	<h1>Walnut</h1>
	<div>
		<span>tree</span>
		<span>nut</span>
		<span>Walnut</span>
	</div>
</article>

Selecting properties

<article nu-scope="fruit" nut="inheritExample">
	<h1 nu-model="name"></h1>
	<div nu-scope="specs" nu-inherit="name">
		<span nu-model="provider"></span>
		<span nu-model="model"></span>
		<span nu-model="name"></span>
	</div>
</article>

results in:

<article>
	<h1>Walnut</h1>
	<div>
		<span>tree</span>
		<span></span>
		<span>Walnut</span>
	</div>
</article>

Conditionals

nu-if

Prints the element when the value evaluates to true.

Example:

<span nu-if="season" nut="ifDemo">Get nuts!</span>
nuts.render( 'ifDemo', { season: true });
// => '<span>Get nuts!</span>'
nuts.render( 'ifDemo', { season: false });
// => ''

nu-unless

Currently Not Available

Prints the element when the value evaluates to false.

Example:

<span nu-unless="editable" nut="unlessDemo">This is not editable</span>
nuts.render( 'unlessDemo', { editable: false });
// => '<span>Get nuts!</span>'
nuts.render( 'unlessDemo', { editable: true });
// => ''

Iterations

nu-repeat

Print the tag once per item in its scope. Works with objects and arrays

Example

<ul nut="arrLoop" nu-scope="nums">
	<li nu-repeat nu-model></li>
</ul>
nuts.render( 'arrLoop', { nums: [ 1, 2, 3 ]});
// => '<ul><li>1</li><li>2</li><li>3</li></ul>'

nu-each

Print the tag content once per item in its scope. Works with objects and arrays

Example

<ul nut="arrLoop" nu-scope="nums" nu-each>
	<li nu-model></li>
</ul>
nuts.render( 'arrLoop', { nums: [ 1, 2, 3 ]});
// => '<ul><li>1</li><li>2</li><li>3</li></ul>'

Attributes

nu-[attribute]

Sets the value of an [attribute] as nu-[attribute] model.

Example:

<span nu-id="identif" nut="demoAtt"></span>
nuts.render( 'demoAtt', { identif: 'veryNuts' });
// => '<span id="veryNuts"></span>'

nu-class

Add classes from model to classlit

Example

<span class="featured" nu-class="classes" nut="klass" ></span>
nuts.render( 'klass', { classes: [ 'big', 'colored' ]});
// => '<span class="featured big colored"></span>'

nud-[attribute]

Sets the value of an data-[attribute] as nud-[attribute] model.

Example

<span nud-language="identif" nut="demoD"></span>
nuts.render( 'demoD', { identif: 'veryNuts' });
// => '<span data-language="veryNuts"></span>'

nu-[attribute]- (boolean attributes)

Prints [attribute] when its value evaluates to true. Just put two hyphens ("--") if your attribute name ends with a hyphen

Example:

<input nut="readonlyDemo" nu-readonly-="available" type="text" name="walnuts">
nuts.render( 'readonlyDemo', { available: true });
// => '<input readonly type="text" name="walnuts">'

Doctypes

nu-doctype-[x]

Tag will be preceed with a HTML doctype if it has this attribute

Example:

<html nu-doctype nut="htmlBase"></html>
nuts.render( 'htmlBase' );
// => '<!DOCTYPE html><html></html>'

Types:

nu-doctype or nu-doctype-5 - HTML5
<!DOCTYPE html>

nu-doctype-4 or nu-doctype-4s - HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

nu-doctype-4t - HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

nu-doctype-4f - HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

nu-doctype-x or nu-doctype-xs - XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

nu-doctype-xt - XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

nu-doctype-xf - XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

nu-doctype-11 - XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Layouts

nu-block

Set this tag as a block named as nu-block value when its parent template is declared as layout

Example:

<html>
	<head nu-block="blockHead"></head>
	<body>
		...
	</body>
</html>

nu-layout

Coming soon

API

See API docs.

.

© 2015 Jacobo Tabernero - jacoborus

Released under MIT License