New unified template system
JavaScript HTML
Latest commit 6d0928d Aug 7, 2015 @jacoborus eslint tests

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