Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 100 lines (86 sloc) 3.396 kb
df30586 @pyykkis Add custom built lodash and remove underscore methods from helpers.
pyykkis authored
1 _ = require '../lib/lodash.js'
b350551 @pyykkis Make transparency to work properly when added to project with browser…
pyykkis authored
2 helpers = require './helpers'
3 Context = require './context'
96250b9 @pyykkis Phew. browerfied build passing.
pyykkis authored
4
7a9414e @pyykkis Literate programming - Take 1.
pyykkis authored
5 # **Transparency** is a client-side template engine which binds JSON objects to DOM elements.
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
6 #
7 # // Template:
8 # //
9 # // <ul id="todos">
10 # // <li class="todo"></li>
11 # // </ul>
7a9414e @pyykkis Literate programming - Take 1.
pyykkis authored
12 #
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
13 # template = document.querySelector('#todos');
14 #
7a9414e @pyykkis Literate programming - Take 1.
pyykkis authored
15 # models = [
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
16 # {todo: "Eat"},
17 # {todo: "Do some programming"},
18 # {todo: "Sleep"}
19 # ];
20 #
7a9414e @pyykkis Literate programming - Take 1.
pyykkis authored
21 # Transparency.render(template, models);
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
22 #
23 # // Result:
24 # // <ul id="todos">
25 # // <li class="todo">Eat</li>
26 # // <li class="todo">Do some programming</li>
27 # // <li class="todo">Sleep</li>
28 # // </ul>
29 #
30 # This documentation focuses on the implementation and internals.
31 # For the full API reference, please see the README.
32
33 # ## Public API
49cb818 @pyykkis Fix #100.
pyykkis authored
34 Transparency = {}
48a8336 @pyykkis Fix IE8 compatibility when using AMD.
pyykkis authored
35
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
36 # `Transparency.render` maps JSON objects to DOM elements.
37 Transparency.render = (context, models = [], directives = {}, options = {}) ->
7a9414e @pyykkis Literate programming - Take 1.
pyykkis authored
38 # First, check if we are in debug mode and if so, log the arguments.
96250b9 @pyykkis Phew. browerfied build passing.
pyykkis authored
39 log = if options.debug and console then helpers.consoleLogger else helpers.nullLogger
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
40 log "Transparency.render:", context, models, directives, options
41
6cbe02a @pyykkis Cleanup.
pyykkis authored
42 return unless context
df30586 @pyykkis Add custom built lodash and remove underscore methods from helpers.
pyykkis authored
43 models = [models] unless _.isArray models
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
44
6cbe02a @pyykkis Cleanup.
pyykkis authored
45 # Context element, state and functionality is wrapped to `Context` object. Get it, or create a new
46 # if it doesn't exist yet.
46eb9aa @pyykkis Fix circular dependencies.
pyykkis authored
47 context = helpers.data(context).context ||= new Context(context, Transparency)
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
48
6cbe02a @pyykkis Cleanup.
pyykkis authored
49 # Rendering is a lot faster when the context element is detached from the DOM, as
50 # reflow calculations are not triggered. So, detach it before rendering.
ccdcc5f @pyykkis Cleanup.
pyykkis authored
51 context.render(models, directives, options).el
1f33e24 @pyykkis Moar cleanup.
pyykkis authored
52
53 # ### Configuration
54
55 # By default, Transparency matches model properties to elements by `id`, `class`, `name` and `data-bind` attributes.
56 # Override `Transparency.matcher` to change the default behavior.
57 #
58 # // Match only by `data-bind` attribute
59 # Transparency.matcher = function (element, key) {
d729def @pyykkis Moar OOP.
pyykkis authored
60 # element.el.getAttribute('data-bind') == key;
1f33e24 @pyykkis Moar cleanup.
pyykkis authored
61 # };
d729def @pyykkis Moar OOP.
pyykkis authored
62 #
95a6343 @pyykkis Fix custom matcher config.
pyykkis authored
63 Transparency.matcher = (element, key) ->
64 element.el.id == key ||
65 key in element.classNames ||
66 element.el.name == key ||
67 element.el.getAttribute('data-bind') == key
d28e97a @pyykkis Scaffolds etc.
pyykkis authored
68
0cdcb69 @pyykkis Cleanup.
pyykkis authored
69 # IE6-8 fails to clone nodes properly. By default, Transparency uses jQuery.clone() as a shim.
70 # Override `Transparency.clone` with a custom clone function, if oldIE needs to be
71 # supported without jQuery.
72 #
73 # Transparency.clone = myCloneFunction;
74 #
75 Transparency.clone = (node) ->
76 $(node).clone()[0]
49cb818 @pyykkis Fix #100.
pyykkis authored
77
78 # ### Exports
79
80 # In order to use Transparency as a jQuery plugin, add Transparency.jQueryPlugin to jQuery.fn object.
81 #
82 # $.fn.render = Transparency.jQueryPlugin;
83 #
84 # // Render with jQuery
85 # $('#template').render({hello: 'World'});
86 #
87 Transparency.jQueryPlugin = helpers.chainable (models, directives, options) ->
88 for context in this
89 Transparency.render context, models, directives, options
90
91 # Register Transparency, if jQuery or Zepto is defined
92 if (jQuery? || Zepto?)
93 $ = jQuery || Zepto
94 $?.fn.render = Transparency.jQueryPlugin
95
96 # Exports for node.js, browser global and AMD
97 if module?.exports then module.exports = Transparency
98 if window? then window.Transparency = Transparency
99 if define?.amd then define -> Transparency
Something went wrong with that request. Please try again.