Jump To …

transparency.coffee

Transparency is a client-side template engine which binds JSON objects to DOM elements.

//  Template:
//
//  <ul id="todos">
//    <li class="todo"></li>
//  </ul>

template = document.querySelector('#todos');

models = [
  {todo: "Eat"},
  {todo: "Do some programming"},
  {todo: "Sleep"}
];

Transparency.render(template, models);

//  Result:
//  <ul id="todos">
//    <li class="todo">Eat</li>
//    <li class="todo">Do some programming</li>
//    <li class="todo">Sleep</li>
//   </ul>

This documentation focuses on the implementation and internals. For the full API reference, please see the README.

 
             		           
                               
                            
                                
               
Public API
             		                            
Transparency = @Transparency = {}
             		           
                               
                            
                                
               
Transparency.render maps JSON objects to DOM elements.
             		                            
Transparency.render = (context, models = [], directives = {}, options = {}) ->
             		           
                               
                            
                                
               
First, check if we are in debug mode and if so, log the arguments.
             		                            
  log = if options.debug and console then consoleLogger else nullLogger
  log "Transparency.render:", context, models, directives, options

  return unless context
  models = [models] unless isArray models
             		           
                               
                            
                                
               
Context element, state and functionality is wrapped to Context object. Get it, or create a new
if it doesn't exist yet.
             		                            
  context = data(context).context ||= new Context(context)
             		           
                               
                            
                                
               
Rendering is a lot faster when the context element is detached from the DOM, as
reflow calculations are not triggered. So, detach it before rendering.
             		                            
  context.render(models, directives, options).el
             		           
                               
                            
                                
               
Configuration
             		                            
             		           
                               
                            
                                
               
In order to use Transparency as a jQuery plugin, add Transparency.jQueryPlugin to jQuery.fn object.



$.fn.render = Transparency.jQueryPlugin;

// Render with jQuery
$('#template').render({hello: 'World'});

             		                            
Transparency.jQueryPlugin = chainable (models, directives, options) ->
  for context in this
    Transparency.render context, models, directives, options
             		           
                               
                            
                                
               
By default, Transparency matches model properties to elements by id, class, name and data-bind attributes.
Override Transparency.matcher to change the default behavior.



// Match only by `data-bind` attribute
Transparency.matcher = function (element, key) {
  element.el.getAttribute('data-bind') == key;
};

             		                            
Transparency.matcher = (element, key) ->
  element.el.id                        == key ||
  key in element.classNames                   ||
  element.el.name                      == key ||
  element.el.getAttribute('data-bind') == key
             		           
                               
                            
                                
               
IE6-8 fails to clone nodes properly. By default, Transparency uses jQuery.clone() as a shim.
Override Transparency.clone with a custom clone function, if oldIE needs to be
supported without jQuery.



Transparency.clone = myCloneFunction;

             		                            
Transparency.clone = onlyWith$ -> (node) -> $(node).clone()[0]

onlyWith$ -> $.fn.render = Transparency.jQueryPlugin

if define?.amd then define -> Transparency