Skip to content

Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.

License

Notifications You must be signed in to change notification settings

jkallunki/transparency

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.

Features

  • Data binding by convention - No extra markup in the views
  • Collection rendering - No need for loops and partials
  • Nested objects and collections - No configuration, just conventions
  • Directives - No custom DSL, just functions

Examples

Here's some of examples. For further details, please see the examples folder, tests and the source code.

Assigning values

Template:

<div class="container">
  <span class="hello"></span><span class="goodbye" href="#"></span>
</div>

Javascript:

var hello = {
  hello:   'Hello',
  goodbye: 'Goodbye!'
};

$('.container').render(hello);

Result:

<div class="container">
  <span class="hello">Hello</span><span class="goodbye" href="#">Goodbye</span>
</div>

Iterating over a list

Template:

<table >
  <thead>
    <tr>
      <th>Date</th>
      <th>Activity</th>
      <th>Comment</th>
      <th>Name</th>
    </tr>
  </head>
  <tbody class="activities">
    <tr class="activity">
      <td class="date"></td>
      <td class="activity"></td>
      <td class="comment"></td>
      <td class="name"></td>
    </tr>
  </tbody>
</table>

Javascript:

var activities = [
  {
    date:     '2011-08-23',
    activity: 'Jogging',
    comment:  'Early morning run',
    name:     'Harry Potter'
  },
  {
    date:     '2011-09-04',
    activity: 'Gym',
    comment:  'Chest workout',
    name:     'Batman'
  }
];

$('.activities').render(activities);

Result:

<table class="activities">
  <thead>
    <tr>
      <th>Date</th>
      <th>Activity</th>
      <th>Comment</th>
      <th>Name</th>
    </th>
  </thead>
  <tbody class="activities">
    <tr class="activity">
      <td class="date">2011-08-23</td>
      <td class="activity">Jogging</td>
      <td class="comment">Early morning run</td>
      <td class="name">Harry Potter</td>
    </tr>
    <tr class="activity">
      <td class="date">2011-09-04</td>
      <td class="activity">Gym</td>
      <td class="comment">Chest workout</td>
      <td class="name">Batman</td>
    </tr>
  </tbody>
</table>

Nested lists

Template:

<div class="container">
  <h1 class="title"></h1>
  <p class="post"></p>
  <div class="comments">
    <div class="comment">
      <span class="name"></span>
      <span class="text"></span>
    </div>
  </div>
</div>

Javascript:

var post = {
  title:    'Hello World',
  post:     'Hi there it is me',
  comments: [ { 
      name: 'John',
      text: 'That rules'
    }, { 
      name: 'Arnold',
      text: 'Great post!'
    }
  ]
};

$('.container').render(post);

Result:

<div class="container">
  <h1 class="title">Hello World</h1>
  <p class="post">Hi there it is me</p>
  <div class="comments">
    <div class="comment">
      <span class="name">John</span>
      <span class="text">That rules</span>
    </div>
    <div class="comment">
      <span class="name">Arnold</span>
      <span class="text">Great post!</span>
    </div>
  </div>
</div>

Nested objects

Template:

<div class="person">
  <div class="firstname"></div>
  <div class="lastname"></div>
  <div class="address">
    <div class="street"></div>
    <div class="zip"><span class="city"></span></div>
  </div>
</div>

Javascript:

var person = {
  firstname: 'John',
  lastname:  'Wayne',
  address: {
    street: '4th Street',
    city:   'San Francisco',
    zip:    '94199'
  }
};

$('.person').render(person);

Result:

<div class="container">
  <div class="firstname">John</div>
  <div class="lastname">Wayne</div>
  <div class="address">
    <div class="street">4th Street</div>
    <div class="zip">94199<span class="city">San Francisco</span></div>
  </div>
</div>

Directives

Directives are used for calculated values and setting element attributes. In addition to having an access to the current data object through this, directives also have access to the current element as a parameter, which makes it easy to, e.g., selectively hide it.

Template:

<div class="person">
  <span class="name"></span>
  <a class="email"></a>
</div>

Javascript:

person = {
  firstname: 'Jasmine',
  lastname:  'Taylor',
  email:     '[email protected]' 
};

directives =
  name:         function(element) { return this.firstname + " " + this.lastname; }
  'email@href': function(element) { return "mailto:" + this.email; }
};

$('.person').render(person, directives);

Result:

<div class="person">
  <span class="name">Jasmine Taylor</span>
  <a class="email" href="mailto:[email protected]">[email protected]</a>
</div>

Nested directives

Template:

<div class="person">
  <span class="name"></span>
  <span class="email"></span>
  <div class="friends">
    <div class="friend">
      <span class="name"></span>
      <span class="email"></span>
    </div>
  </div>
</div>

Javascript:

person = {
  firstname:  'Jasmine',
  lastname:   'Taylor',
  email:      '[email protected]',
  friends:    [ {
      firstname: 'John',
      lastname:  'Mayer',
      email:     '[email protected]'
    }, {
      firstname: 'Damien',
      lastname:  'Rice',
      email:     '[email protected]'
    }
  ]
};

nameDecorator = function() { return this.firstname + " " + this.lastname };

directives = {
  name: nameDecorator,
  friends: {
    name: nameDecorator
  }
};

$('.person').render(person, directives);

Result:

<div class="person">
  <span class="name">Jasmine Taylor</span>
  <span class="email">[email protected]</span>
  <div class="friends">
    <div class="friend">
      <span class="name">John Mayer</span>
      <span class="email">[email protected]</span>
    </div>
    <div class="friend">
      <span class="name">Damien Rice</span>
      <span class="email">[email protected]</span>
    </div>
  </div>
</div>

Philosophy

Transparency is heavily influenced by PURE but is even more opinionated about how templates and data bind together. Templating with Transparency is unobustrive, dead simple and just stays out of the way.

Transparency relies on convention over configuration and requires you to have 1:1 match between CSS classes and JSON objects. The idea is to minimize the cognitive noise you have to deal with. Just call $('.container').render(data) and move on.

About

Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 80.5%
  • CoffeeScript 19.5%