totaljs / tangular Goto Github PK

View Code? Open in Web Editor NEW

61.0 11.0 21.0 162 KB

A simple JavaScript template engine like Angular.js for websites or node.js

License: MIT License

Shell 1.32% JavaScript 98.68%

template-engine angular javascript

tangular's Introduction

Tangular

A simple template engine like Angular.js for JavaScript or node.js

only 2.0 kB minified + gziped
syntax like Angular.js templates
supports custom helpers
supports conditions (+ nested conditions)
supports loops (+ nested loops)
supports two models
no dependencies
IE >= 9
best of use with www.totaljs.com - web framework for Node.js
Live example on JSFiddle / Tangular
One of the fastest template engine in the world

YOU MUST SEE:

Node.js

npm install tangular

require('tangular');
// Inits Tangular and registers "Tangular" keyword as a global variable
// console.log(Tangular);

Example

var output = Tangular.render('Hello {{name}} and {{name | raw}}!', { name: '<b>world</b>' });
// Hello &lt;b&gt;world&lt;/b&gt; and <b>world</b>!

Second model

very helpful, you don't have to change the base model
second model can be used in the template via $ character, e.g. {{ $.property_name }}

var output = Tangular.render('Hello {{ name }} and {{ $.name }}!', { name: 'MODEL 1' }, { name: 'MODEL 2'});
// Hello MODEL 1 and MODEL 2

Best performance with pre-compile

// cache
var template = Tangular.compile('Hello {{name}} and {{name | raw}}!');

// render
// template(model, [model2])
var output = template({ name: 'Peter' });

Conditions

supports else if

{{if name.length > 0}}
    <div>OK</div>
{{else}}
    <div>NO</div>
{{fi}}

{{if name !== null}}
    <div>NOT NULL</div>
{{fi}}

Looping

{{foreach m in orders}}
    <h2>Order num.{{m.number}} (current index: {{$index}})</h2>
    <div>{{m.name}}</div>
{{end}}

Custom helpers

Tangular.register('currency', function(value, decimals) {
    // this === MODEL/OBJECT
    // console.log(this);
    // example
    return value.format(decimals || 0);
});

Tangular.register('plus', function(value, count) {
    return value + (count || 1);
});

// Calling custom helper in JavaScript, e.g.:
Tangular.helpers.currency(100, 2);

<div>{{ amount | currency }}</div>
<div>{{ amount | currency(2) }}</div>

<!-- MULTIPLE HELPERS -->
<div>{{ count | plus | plus(2) | plus | plus(3) }}</div>

Built-in helpers

<div>{{ name }} = VALUE IS ENCODED BY DEFAULT</div>
<div>{{ name | raw }} = VALUE IS NOT ENCODED</div>

Miracles

var template = Tangular.compile('Encoded value {{}} and raw value {{ | raw }}.');
console.log(template('<b>Tangular</b>'));

Alias: Tangular is too long as word

// use alias:
// Ta === Tangular
Ta.compile('');

Contributors

Contributor	Type	E-mail
Peter Širka	author	[email protected]
Константин	contributor

tangular's People

Contributors

Stargazers

Watchers

tangular's Issues

Adding entry and refresh template

Hi Peter,

The below code run corrctly with me, I'm doing it in the cirrect way, is there a simplet way. thanks

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <title>Multi lines entry</title>
<script src="tangular.js"></script>
</head>
<body>

<div id='output'></div>

<input type="text" id="newOrderNum"/>
<input type="text" id="newOrderName"/>
<button id="AddOrderBtn">Add user</button>

<script id="template" type="text/html">
{{foreach m in orders}}
    <h2>Order num.{{m.number}} (current index: {{$index}})</h2>
    <div>{{m.name}}</div>
{{end}}
</script>

<script>
Tangular.register('plus', function() {});

var model = { name: 'total.js', age: 2, orders: [{ number: 1001, name: 'iPhone' }, { number: 1002, name: 'Samsung' }]};
var source = Tangular.compile(document.getElementById('template').innerHTML);

document.querySelector('#output').innerHTML = source(model);

document.querySelector('#AddOrderBtn').addEventListener("click", function(){

    var newON = document.querySelector('#newOrderNum').value;
    var newNM = document.querySelector('#newOrderName').value;

    model.orders.push({"number": newON, "name": newNM});

    document.querySelector('#newOrderNum').value="";
    document.querySelector('#newOrderName').value="";

    document.querySelector('#output').innerHTML = source(model);
});

</script>
</body>
</html>

Redundant empty line generated when "if" condition not filled

Prefer tangular than Tangular

Tangular.render is not working

Hi! I have installed Tangular 4.0.0.

When I do this:

const Tangular = require("tangular");

Tangular.render("{{template}}", {template:"Ok"});

The application throws the next exception:

Tangular.render is not a function

Now, when I install Tangular ^2.0.1, it works fine!

What am I doing wrong?

Any plans to add layouts and/or partials?

I'm loving how useful this templating engine is and how similar it is to Angular. Is there any plans to add support for layouts and/or partials?

Multiple filters not work

var _ = require('lodash');
var Tangular = require('Tangular');

Tangular.register('slice', function(item, from, to) {
    if (!to) {
        return item.slice(0, from);
    }
    return item.slice(from - 1, to - 1);
});

Tangular.register('uppercase', function(item) {
    return item.toUpperCase();
});

Tangular.compile('hello {{world|slice(1,5)|uppercase}}')({ world: 'I am the alpha and the omega' })

Quotes problem

Hello! I'm trying to pass quotes to the template, but it is not showing them as I like.

I'm getting " instead of a normal quote (")

I've tried to use the raw pipe, but it didn't solve my problem

Prevent HTML tag escape

Hello,

Is there a way to prevent HTML tag to be escaped ?

Tangular.render('fdsfsdfsd {{ok}}',{ ok : '<span style="color:red;">yes</span>'})
18:33:18.463 'fdsfsdfsd <span>&lt;span style=&quot;color:red;&quot;&gt;yes&lt;/span&gt;</span>'

Thanks for your help

Word appears 2 times

Hello,

I've a problem when I'm using Tangular without "{{ }} " :

console.log(Tangular.render('test',{}))==> testtest
console.log(Tangular.render('test {{name}}',{name:'ok' }))==> test ok

Thanks for your help !

Display Tangular output in the html page

Hi Peter,

I added this line to your fiddle, hoping to see the output, but nothing seen, how to make it:

document.querySelector('#output').html(template2(model));

in the HTML part I added:
< d i v id='output'>< / d i v>

thanks

Security policy not passing

Hello,

We're using security header (Content-Security-Policy) on the page and we don't allow unsafe-eval. I see that there is a "new Function" in you code that is blocked by this header....

Refused to evaluate a string as JavaScript because 'unsafe-eval'

Is there a way to change the new Function call ?

totaljs / tangular Goto Github PK

tangular's Introduction

Tangular

Node.js

Example

Second model

Best performance with pre-compile

Conditions

Looping

Custom helpers

Built-in helpers

Miracles

Alias: Tangular is too long as word

Contributors

tangular's People

Contributors

Stargazers

Watchers

Forkers

tangular's Issues

Recommend Projects

Recommend Topics

Recommend Org