https://github.com/pfrazee/tintjs

Logicless templates
https://github.com/pfrazee/tintjs

Last synced: 11 days ago
JSON representation

Logicless templates

• Host: GitHub
• URL: https://github.com/pfrazee/tintjs
• Owner: pfrazee
• Created: 2012-04-28T15:51:37.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-12-19T17:27:15.000Z (about 12 years ago)
• Last Synced: 2024-10-30T15:54:37.935Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 133 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
TintJS

======

Tint uses templates which specify an interface of variables, namespaces, and functions. That interface is used to compile a prototype for objects which build the output.

The template:

```HTML



    


        $nav{

        


            $item() {

                $header(label){
$label;
}header;

                $link(label, uri){
$label;
}link;

            }item;

        

        }nav;

    

    


        
$title;

        

            $message(uri, author, title, date) {

                

                    $author;

                    $title;

                    $date;

                

            }message;

        

    



```


The javascript:

```javascript

// Compile the prototype

// `templateString` contains the above template

var Tmpl = Tint.compile(templateString);

// ...

// Instantiate the builder object

var tmpl = new Tmpl();

// nav

tmpl.nav.item().header('Inbox');

tmpl.nav.item().link('Inbox', '/');

tmpl.nav.item().link('Settings', '/settings');

tmpl.nav.item().header('Services');

tmpl.nav.item().link('MyService', '/myservice');

// content

tmpl.title = "Your Inbox";

for (var i=0; i < messages.length; i++) {

    var message = messages[i];

    tmpl.message(message.uri, message.author, message.summary, message.date);

}

// Generate output

var html = tmpl.toString();

```

You can also extend the prototype, if you like:

```javascript

// Add a custom constructor

var Tmpl = new Tint.compile(templateString, function(services) {

    this.nav.item().header('Inbox');

    this.nav.item().link('Inbox', '');

    this.nav.item().link('Settings', '/settings');

    this.nav.item().header('Services');

    for (var i=0; i < services.length; i++) {

        this.nav.item().link(services[i].name, services[i].uri);

    }

});

Tmpl.prototype.addMessage = function(message) {

    this.message(message.uri, message.author, message.summary, message.date);

};

// ...

// Instantiate the builder object

var tmpl = new Tmpl(my_services);

tmpl.title = "Your Inbox";

for (var i=0; i < messages.length; i++) {

    tmpl.addMessage(messages[i]);

}

var html = tmpl.toString();

```

## How it works

Tint's templates use 3 different constructs:

 - Blocks

 - Variables

 - Functions

**Blocks** are just namespaces for parts of the template. They don't change the output.

`$block_name{ whatever }block_name;`

**Variables** are direct substitutions. They're replaced with whatever value they're assigned.

`$variable_name;`

**Functions** are blocks which can be added multiple times, and which take parameter lists.

`$func_name(param1, param2) { whatever $param1; whatever $param2; }func_name;`

That's it; those building blocks are enough to generate your output. Any logic you need (like conditionals, escaping, or lists with commas on all but the last item) is added to the prototype, by you, using a language that's designed for it (Javascript).

## A few additional notes

Function calls generate blocks which are stored in an array with a prefix added to the name. That is, if my template has a `$profile(username)` function, then I can access the blocks it creates at `_profile[]`. Function parameters are stored as variables with the same name as the parameter itself: `_profile[0].username`.