Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fiatjaf/tempreites

One-file semantic DSL-free templates direto da roça for the browser and server.
https://github.com/fiatjaf/tempreites

html regular-expression template

Last synced: 12 days ago
JSON representation

One-file semantic DSL-free templates direto da roça for the browser and server.

Awesome Lists containing this project

README

        

### [DEMO](http://jsfiddle.net/fiatjaf/mSEZ6/)
### [Comparison with Mustache](http://jsperf.com/tempreites-vs-mustache/4)

# Tempreites

Crude string templating without any syntax, just semantic HTML.

**Disclaimer**: This is old, slow, buggy and not recommended. It's here just for historical reasons. It was my first public library and published on http://microjs.com/.

## Usage

Get this as a string,

```html





```

attach data to it,

```javascript
var data = {
title: 'Austrian economists and their theories',
theories: [
{ author: 'Menger', theory: 'Subjective value', url: '/subj' },
{ author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },
{ author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' },
]
}

tempreites.render(template, data)
```

get this back:

```html





```

## Features

* __Semantic data binding__ - No need for <%=foo%> or {{foo}} assignments
* __Collection rendering__ - No need for hand-written loops
* __Valid HTML templates__ - Write templates as a part of the HTML, in plain HTML
* __View logic in JavaScript__ - No crippled micro-template language, just plain JavaScript functions

## TODOs:

* _Basic optmization_
* _Read some `data-` attr to see in which element arrays of data will duplicate_

## Installation

```
npm install tempreites
```

Or download the [file](https://raw.github.com/fiatjaf/tempreites/master/dist/tempreites.js) and include it anywhere.

---

## Documentation

Considering a `data` object like this:
```javascript
var data = {
name: 'Miyamoto',
link: '/miyamoto',
completeName: {
first: 'Shigeru'
last: 'Miyamoto'
},
sons: [{ name: 'Mario', show: true }, { name: 'Luigi', show: false }]
show: true
}
Tempreites.render(template, data)
```

#### Binding values

Use a `class` or an `id` at the target element with the value of the key in your `data` object.
```html


```

#### Nested objects

Use a `class` or an `id` at some element with the value of the parent key in your `data` object, then use a `class` or `id` with the child key anywhere inside the parent element.
```html



,




```

#### Nested lists

Use a `class` or an `id` at the element immediattely before the element you want to be repeated with the list values, then use a `class` or `id` with the child key anywhere inside it.
```html




```

#### Binding values to attributes

Use the `data-bind` attribute with the special syntax "javascriptObjectAttrName - > htmlElementAttrNameToBindTo". If you want to bind to more than one attr, write the other bindings at the same `data-bind`, separated by a `|`:
```html


```

#### Conditional showing of elements

Use the `data-show-if` attr naming a key at the `data` object which will be tested for deciding if the element
will be shown or not.
```html






```

#### Pre-compiling templates

Call the `compile` function to get a pre-compiled template to which you can just pass the data later.
```javascript
var tpr = Tempreites.compile('

')
tpr.render({u: 'a'})
tpr.render({u: 'b'})
```

---

Inspired by [Plates](https://github.com/flatiron/plates) and [Transparency](https://github.com/leonidas/transparency/), but simplified and more useful.

---

Written with regular expressions, como se fazia antigamente lá na roça.