1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
.. _ref-templates:
====================
Javascript Templates
====================
Pipeline allows you to use javascript templates along with your javascript views.
To use your javascript templates, just add them to your ``JAVASCRIPT`` group ::
PIPELINE['JAVASCRIPT'] = {
'application': {
'source_filenames': (
'js/application.js',
'js/templates/**/*.jst',
),
'output_filename': 'js/application.js'
}
}
For example, if you have the following template ``js/templates/photo/detail.jst`` ::
<div class="photo">
<img src="<%= src %>" />
<div class="caption">
<%= caption %>
</div>
</div>
It will be available from your javascript code via window.JST ::
JST.photo_detail({ src:"images/baby-panda.jpg", caption:"A baby panda is born" });
Configuration
-------------
Template function
.................
By default, Pipeline uses a variant of `Micro Templating <http://ejohn.org/blog/javascript-micro-templating/>`_ to compile the templates, but you can choose your preferred JavaScript templating engine by changing ``PIPELINE['TEMPLATE_FUNC']`` ::
PIPELINE['TEMPLATE_FUNC'] = 'template'
Template namespace
..................
Your templates are made available in a top-level object, by default ``window.JST``,
but you can choose your own via ``PIPELINE['TEMPLATE_NAMESPACE']`` ::
PIPELINE['TEMPLATE_NAMESPACE'] = 'window.Template'
Template extension
..................
Templates are detected by their extension, by default ``.jst``, but you can use
your own extension via ``PIPELINE['TEMPLATE_EXT']`` ::
PIPELINE['TEMPLATE_EXT'] = '.mustache'
Template separator
..................
Templates identifier are built using a replacement for directory separator,
by default ``_``, but you specify your own separator via ``PIPELINE['TEMPLATE_SEPARATOR']`` ::
PIPELINE['TEMPLATE_SEPARATOR'] = '/'
Using it with your favorite template library
--------------------------------------------
Mustache
........
To use it with `Mustache <https://github.com/janl/mustache.js>`_ you will need
some extra javascript ::
Mustache.template = function(templateString) {
return function() {
if (arguments.length < 1) {
return templateString;
} else {
return Mustache.to_html(templateString, arguments[0], arguments[1]);
}
};
};
And use these settings ::
PIPELINE['TEMPLATE_EXT'] = '.mustache'
PIPELINE['TEMPLATE_FUNC'] = 'Mustache.template'
Handlebars
..........
To use it with `Handlebars <http://handlebarsjs.com/>`_, use the following settings ::
PIPELINE['TEMPLATE_EXT'] = '.handlebars'
PIPELINE['TEMPLATE_FUNC'] = 'Handlebars.compile'
PIPELINE['TEMPLATE_NAMESPACE'] = 'Handlebars.templates'
Ember.js + Handlebars
.....................
To use it with `Ember.js <http://emberjs.com/>`_, use the following settings ::
PIPELINE['TEMPLATE_EXT'] = '.handlebars'
PIPELINE['TEMPLATE_FUNC'] = 'Ember.Handlebars.compile'
PIPELINE['TEMPLATE_NAMESPACE'] = 'window.Ember.TEMPLATES'
PIPELINE['TEMPLATE_SEPARATOR'] = '/'
Prototype
.........
To use it with `Prototype <http://www.prototypejs.org/>`_, just setup your
``PIPELINE['TEMPLATE_FUNC']`` ::
PIPELINE['TEMPLATE_FUNC'] = 'new Template'
|
