Git Product home page Git Product logo

ate.js's Introduction

ate.js

Advanced template engine. If you can code about javascript you can use this code.

Usage

You can rendering a string with ate.render(template, data) or using method render in a string variable like this template.render(data).

Using with object data

var template = '{{one}} {{two}}';
var data = {one:'satu', two:'dua'};
var output = ate.render(template, data);
// output is "satu dua"

Using with array data

var template = 'one is "{{0}}", two is "{{1}}".';
var data = ['satu', 'dua'];
var output = ate.render(template, data);

Using dot notation on data

To display value of data from descendant context, use ..

var template = 'one in indonesian language is "{{one.idn}}"';
var data = {one: {idn: 'satu', esp:'uno'}};
var output = ate.render(template, data);
// output ->
//    "one in indonesian language is "satu"

Using function as data

In your data which passed into render can be contained a function, and that will be executed .

var template = 'Date is {{fn}}';
var data = {
    fn: function() {
        var date = new Date();
        return date.toLocaleString();
    }
};
var output = ate.render(template, data);

In fn scope value of this is the entire of data which passed into render. There some arguments will be passed into the function, view the source to see how a function executed.

Filters

While processing value of data, it can be filtering using character | after the value.

All of filter located in filters directory.

Register a filter

Use 'filter' method to register your filter.

ate.filter('upper', function() {
    return this.toUpperCase();
});

Use a filter

In a template filter can be used with append a | and name of filter.

var template = '{{one|upper}}';
var data = {one:'satu'};
var output = ate.render(template, data);
// output is SATU

Available filters

  • i ignore the brackets.
var template = '{{ignore|i}}';
var output = ate.render(template);
// output is "{{ignore}}"
  • length return length of data.
var template = '{{word|length}}';
var data = {word: 'four'};
var output = ate.render(template, data);
// output is "4"
  • lower convert value into lowercase.
  • upper convert value into uppercase.
  • ternary Do a ternary operation about the value
var template = '{{ok|ternary this is true,this is false}}';
var data = {ok: true};
var output = ate.render(template, data);
  // output is "this is true"
  • each Loop based on value
var template = '{{words|each 
                  <td>:idn</td><td>:esp</td>
                }}'
var data = {words: [{idn:'satu': esp:'uno'},{idn:'dua': esp:'dos'}]};
var output = ate.render(template, data);
// output is "<td>satu</td><td>uno</td> <td>dua</td><td>dos</td>"
  • sum Sum a value of an object
var template = 'Sum of value is {{data|sum value}}';
var data = {data:[{no:1, value:5},{no:2, value:4}]};
var output = ate.render(template, data);
// output is "Total value is 9"
  • count Count the value of an object
var template = 'Count of value is {{data|count value}}';
var data = {data:[{no:1, value:5},{no:2, value:4}]};
var output = ate.render(template, data);
// output is "Total value is 2"

There a amazing libraries can be used as filter in this page http://phpjs.org

License

BSD License

ate.js's People

Contributors

emaniacs avatar

Stargazers

Michael avatar Yuya Saito avatar L L avatar Mattias Erming avatar Nicholas Pringle avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.