jquery-jt

A very and really fast and simple jquery template engine. A lot of attributes supported in only 1,2 KB (0,84 KB with gzip)

Usage no npm install needed!

<script type="module">
  import jqueryJt from 'https://cdn.skypack.dev/jquery-jt';
</script>

README

jquery-jt - Javascript Template

A very and really fast and simple jquery template engine. A lot of attributes supported in only 1,2 KB (0,84 KB with gzip)

Installation

npm install jquery-jt --save

Include

<script type="text/javascript" src="node_modules/jquery-jt/dist/jt.min.js"></script>

Template attributes:

jQuery-jT uses the data attribute to define what every HTML tags will be managed:

  • data-jt-text: appends text in the element
  • data-jt-class: adds attribute to the element
  • data-jt-link: set href attribute of the element
  • data-jt-src: set src attribute of the element
  • data-jt-alt: set alt attribute of the element
  • data-jt-data: set data attribute of the element
  • data-jt-title: set title attribute of the element

Fully example

[...]

<!-- The container of rendered template  -->
<div id="container"></div>

<!-- Template definition -->
<div id="template">
    <a data-jt="hello"
       data-jt-src="hello_source"
       data-jt-title="tooltip"
       data-jt-alt="hello_alternative"
       data-jt-link="lang"
       data-jt-class="color"></a>
</div>

<script>
    // Configuration of jT
    $(function () {
        $("#template").jt({
            destination: "#container",
            data: [
                {
                    hello: "Hello world!",
                    hello_source: "en",
                    tooltip: "Hello world",
                    hello_alternative: "Hello",
                    lang: "#en",
                    color: "black"
                },
                [...]
            ],
            beforeRender: [
                function ($template, item) {
                    $template.append(item.hello_source);
                    return $template;
                }
            ]
        });
    });
</script>

[...]

The result will be:


<div id="template">
    <a src="en" title="Hello world" alt="Hello" href="#en" class="black">Hello world!</a>
en
[...]
</div>

Configuration

  • template (string - default value: undefined): the selector of the element containing the template. Use it only for the subConfiguration.
  • destination (string - default value undefined): the selector of the element which will contain the rendered template.
  • data (array/object - default value []): the data to render using template.
  • subConfiguration (array of configurations/configuration - default value []): jquery-jt supports sub template
  • beforeRender (array of functions/ function - default value []): the signature is "function($template: JQuery, item: any)". Every functions will be called before render the template for each item in data. $template is the template jQuery element and record is the current item of the data.
  • afterRender (array of functions/ function - default value []): the signature is "function($template: JQuery, item: any)". Every functions will be called after render the template for each item in data. $template is the template jQuery element and record is the current item of the data.

Examples

To see other examples navigate to the project folder "test/html".

Browsers support

All the browsers supported by you jQuery version is supported by jQuery-jT library.

How to contribute

If you are reading this it's already a good sign and we are thankful for it! Every kind of helps are welcomed: code, documentation, testing...

To contribute to the project follow these simple steps:

  • Install npm
  • Install DalekJS:
npm install dalek-cli -g
  • Clone the repository:
git clone https://github.com/MpStyle/jt.git
  • In the root of the project run:
npm install
  • To build the library run:
grunt
  • To run the tests:
npm test
  • Create a pull request.

History

  • 1.0.2: Updated documentation and project files, created automatic tests
  • 1.0.1: Updated documentation and package.json
  • 1.0.0