- Notifications
You must be signed in to change notification settings - Fork0
Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.
License
jkallunki/transparency
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Result:
<divclass="container"><spanclass="hello">Hello</span><spanclass="goodbye"href="#">Goodbye</span></div>
Template:
<table><thead><tr><th>Date</th><th>Activity</th><th>Comment</th><th>Name</th></tr></head><tbodyclass="activities"><trclass="activity"><tdclass="date"></td><tdclass="activity"></td><tdclass="comment"></td><tdclass="name"></td></tr></tbody></table>
#"auto" data-snippet-clipboard-copy-content="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);">
varactivities=[{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:
<tableclass="activities"><thead><tr><th>Date</th><th>Activity</th><th>Comment</th><th>Name</th></th></thead><tbodyclass="activities"><trclass="activity"><tdclass="date">2011-08-23</td><tdclass="activity">Jogging</td><tdclass="comment">Early morning run</td><tdclass="name">Harry Potter</td></tr><trclass="activity"><tdclass="date">2011-09-04</td><tdclass="activity">Gym</td><tdclass="comment">Chest workout</td><tdclass="name">Batman</td></tr></tbody></table>
Template:
<divclass="container"><h1class="title"></h1><pclass="post"></p><divclass="comments"><divclass="comment"><spanclass="name"></span><spanclass="text"></span></div></div></div>
#"auto" data-snippet-clipboard-copy-content="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);">
varpost={title:'Hello World',post:'Hi there it is me',comments:[{name:'John',text:'That rules'},{name:'Arnold',text:'Great post!'}]};$('.container').render(post);
Result:
<divclass="container"><h1class="title">Hello World</h1><pclass="post">Hi there it is me</p><divclass="comments"><divclass="comment"><spanclass="name">John</span><spanclass="text">That rules</span></div><divclass="comment"><spanclass="name">Arnold</span><spanclass="text">Great post!</span></div></div></div>
Template:
<divclass="person"><divclass="firstname"></div><divclass="lastname"></div><divclass="address"><divclass="street"></div><divclass="zip"><spanclass="city"></span></div></div></div>
#"auto" data-snippet-clipboard-copy-content="var person = { firstname: 'John', lastname: 'Wayne', address: { street: '4th Street', city: 'San Francisco', zip: '94199' }};$('.person').render(person);">
varperson={firstname:'John',lastname:'Wayne',address:{street:'4th Street',city:'San Francisco',zip:'94199'}};$('.person').render(person);
Result:
<divclass="container"><divclass="firstname">John</div><divclass="lastname">Wayne</div><divclass="address"><divclass="street">4th Street</div><divclass="zip">94199<spanclass="city">San Francisco</span></div></div></div>
Directives are used for calculated values and setting element attributes. In addition to having an access to the current data object throughthis, directives also have access to the current element as a parameter, which makes it easy to, e.g., selectively hide it.
Template:
<divclass="person"><spanclass="name"></span><aclass="email"></a></div>
#"auto" data-snippet-clipboard-copy-content="person = { firstname: 'Jasmine', lastname: 'Taylor', email: 'jasmine.tailor@example.com' };directives = name: function(element) { return this.firstname + " " + this.lastname; } 'email@href': function(element) { return "mailto:" + this.email; }};$('.person').render(person, directives);">
person={firstname:'Jasmine',lastname:'Taylor',email:'jasmine.tailor@example.com'};directives=name:function(element){returnthis.firstname+" "+this.lastname;}'email@href':function(element){return"mailto:"+this.email;}};$('.person').render(person,directives);
Result:
<divclass="person"><spanclass="name">Jasmine Taylor</span><aclass="email"href="mailto:jasmine.tailor@example.com">jasmine.tailor@example.com</a></div>
Template:
<divclass="person"><spanclass="name"></span><spanclass="email"></span><divclass="friends"><divclass="friend"><spanclass="name"></span><spanclass="email"></span></div></div></div>
#"auto" data-snippet-clipboard-copy-content="person = { firstname: 'Jasmine', lastname: 'Taylor', email: 'jasmine.taylor@example.com', friends: [ { firstname: 'John', lastname: 'Mayer', email: 'john.mayer@example.com' }, { firstname: 'Damien', lastname: 'Rice', email: 'damien.rice@example.com' } ]};nameDecorator = function() { return this.firstname + " " + this.lastname };directives = { name: nameDecorator, friends: { name: nameDecorator }};$('.person').render(person, directives);">
person={firstname:'Jasmine',lastname:'Taylor',email:'jasmine.taylor@example.com',friends:[{firstname:'John',lastname:'Mayer',email:'john.mayer@example.com'},{firstname:'Damien',lastname:'Rice',email:'damien.rice@example.com'}]};nameDecorator=function(){returnthis.firstname+" "+this.lastname};directives={name:nameDecorator,friends:{name:nameDecorator}};$('.person').render(person,directives);
Result:
<divclass="person"><spanclass="name">Jasmine Taylor</span><spanclass="email">jasmine.taylor@example.com</span><divclass="friends"><divclass="friend"><spanclass="name">John Mayer</span><spanclass="email">john.mayer@example.com</span></div><divclass="friend"><spanclass="name">Damien Rice</span><spanclass="email">damien.rice@example.com</span></div></div></div>
Transparency is heavily influenced byPURE but is even more opinionated about howtemplates 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 andJSON objects. The idea is to minimize the cognitive noise you have to deal with.Just call$('.container').render(data) and move on.