https://github.com/manufosela/tpleng

Template Engine bases in requireJS to render html templates asociated with a javascript file
https://github.com/manufosela/tpleng

Last synced: about 1 month ago
JSON representation

Template Engine bases in requireJS to render html templates asociated with a javascript file

• Host: GitHub
• URL: https://github.com/manufosela/tpleng
• Owner: manufosela
• Created: 2015-03-24T13:16:39.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-07T12:14:57.000Z (over 9 years ago)
• Last Synced: 2023-03-24T12:04:09.506Z (almost 2 years ago)
• Language: JavaScript
• Size: 145 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
tplEng

======

tplEng is a Javascript Template Engine to render html templates asociated with a javascript file. It uses jQuery or Zepto.

Requeriments:

-------------

It use **require.js** (https://github.com/requirejs) and **text.requireJS** (https://github.com/requirejs/text) plugin to load templates files. If you don't want use it, you can load templates embebed into your code.

Description:

-------------

tplEng is an template engine based in javascript. It use requireJS library to load templates, but its not mandatory.

tplEng uses <% %> to replace values of variables into the template.

It uses {{ }} to load templates into templates. This feature needs requireJS library.

It has 3 main methods:

* **applyHTMLTpl** receives a HTML template and its parameters and returns the HTML output with params parsed and replaced.

* **applyTplIntoDOM** receives a HTML template, its parameters and a DOM identifier. Inserts the HTML output with the params parsed and replaced into the DOM element of identifier receive

* **loadTpl** receives a template file name, a DOM identifier, and parameters. It loads, using requireJS, the HTML template file and inserts the HTML output with the params parsed and replaced into the DOM element of identifier receive

_____________

applyHTMLTpl:

-------------

Receives a JSON argument with this structure:

* **html**: the HTML code with the parameters into <% %>.

* **[params]**: json object with pairs key:value

* **[callback]**: a javascript existing function that it is called when the template has been renderized

Its mandatory use "this" in every parameter into template. Ej: <h1><%this.name%></h1>

_____________

applyTplIntoDOM:

----------------

Receives a JSON argument with this structure:

* **domid**: the DOM identifier where insert the HTML renderized.

* **html**: the HTML code with the parameters into <% %>.

* **[params]**: json object with pairs key:value

* **[callback]**: a javascript existing function that it is called when the template has been renderized

_____________

loadTpl:

--------

Receives a JSON argument with this structure:

* **tplname**: exitsing template file name into ./tpl directory

* **domid**: the DOM identifier where insert the HTML renderized. 

* **[params]**: json object with pairs key:value

* **[callback]**: a javascript existing function that it is called when the template has been renderized

_____________

Examples:

--------------

```javascript

    var jte = new TplEng();

    var htmlTpl = "
<%this.title%>
Lore Ipsum...
";

    var params = { title: "My Title" };

    var callback = function() { console.log( "My template was renderized" );

    var output = jte.applyHTMLTpl( htmlTpl, params );

```


This returns into the *output* variable: 

```html

My Title

Lore Ipsum...

```


And show by console: "My template was renderized"