4
4
5
5
Features:
6
6
7
- * Import Handlebars templates as ES6 modules
8
- * Support for Handlebars [ helpers] ( #helpers ) and partials
9
- * [ Precompiles] ( http://handlebarsjs.com/precompilation.html ) templates so your application only needs the Handlebars runtime
10
- * Handlebars runtime [ included] ( #handlebars )
11
- * Optional rendering to [ jQuery collections] ( #jquery ) vs. raw strings
7
+ - Import Handlebars templates as ES6 modules
8
+ - Support for Handlebars [ helpers] ( #helpers ) and partials
9
+ - [ Precompiles] ( http://handlebarsjs.com/precompilation.html ) templates so your application only needs the Handlebars runtime
10
+ - Handlebars runtime [ included] ( #handlebars )
11
+ - Optional rendering to [ jQuery collections] ( #jquery ) vs. raw strings
12
12
13
13
## Installation
14
14
@@ -31,15 +31,14 @@ var rollup = require('rollup');
31
31
var handlebars = require (' rollup-plugin-handlebars-plus' );
32
32
var rootImport = require (' rollup-plugin-root-import' );
33
33
34
-
35
34
var partialRoots = [` ${ __dirname } /src/client/js/views/` , ` ${ __dirname } /src/common/views/` ];
36
35
37
36
rollup ({
38
37
entry: ' main.js' ,
39
38
plugins: [
40
39
// Required by use of `partialRoot` below.
41
40
rootImport ({
42
- root: partialRoots
41
+ root: partialRoots,
43
42
}),
44
43
handlebars ({
45
44
handlebars: {
@@ -55,8 +54,8 @@ rollup({
55
54
// Options to pass to Handlebars' `parse` and `precompile` methods.
56
55
options: {
57
56
// Whether to generate sourcemaps for the templates
58
- sourceMap: true // Default: true
59
- }
57
+ sourceMap: true , // Default: true
58
+ },
60
59
},
61
60
62
61
// The ID(s) of modules to import before every template, see the "Helpers" section below.
@@ -74,10 +73,10 @@ rollup({
74
73
partialRoot: partialRoots, // Default: none
75
74
76
75
// The module ID of jQuery, see the "jQuery" section below.
77
- jquery: ' jquery' // Default: none
78
- })
79
- ]
80
- })
76
+ jquery: ' jquery' , // Default: none
77
+ }),
78
+ ],
79
+ });
81
80
```
82
81
83
82
lets you do this:
@@ -114,16 +113,16 @@ rollup({
114
113
entry: ' main.js' ,
115
114
plugins: [
116
115
handlebars ({
117
- helpers: [' /utils/HandlebarsHelpers.js' ]
118
- })
119
- ]
120
- })
116
+ helpers: [' /utils/HandlebarsHelpers.js' ],
117
+ }),
118
+ ],
119
+ });
121
120
```
122
121
123
122
``` js
124
123
// /utils/HandlebarsHelpers.js
125
- export default function (Handlebars ) {
126
- Handlebars .registerHelper (' encodeURIComponent' , function (text ) {
124
+ export default function (Handlebars ) {
125
+ Handlebars .registerHelper (' encodeURIComponent' , function (text ) {
127
126
return new Handlebars.SafeString (encodeURIComponent (text));
128
127
});
129
128
}
@@ -168,9 +167,9 @@ rollup({
168
167
commonjs ({
169
168
include: ' node_modules/**' ,
170
169
}),
171
- handlebars ()
172
- ]
173
- })
170
+ handlebars (),
171
+ ],
172
+ });
174
173
```
175
174
176
175
In case you need the default runtime ID, it's available as ` handlebars.runtimeId ` . This might be
@@ -192,8 +191,8 @@ import Template from './index.html';
192
191
var MyView = Backbone .View .extend ({
193
192
render () {
194
193
this .setElement (Template ());
195
- }
196
- })
194
+ },
195
+ });
197
196
```
198
197
199
198
or by customizing the template using jQuery's APIs:
@@ -206,7 +205,7 @@ var tooltip = TooltipTemplate();
206
205
207
206
tooltip .css ({
208
207
left: 50 ,
209
- top: 100
208
+ top: 100 ,
210
209
});
211
210
212
211
$ (' body' ).append (tooltip);
@@ -223,10 +222,10 @@ rollup({
223
222
entry: ' main.js' ,
224
223
plugins: [
225
224
handlebars ({
226
- jquery: ' jquery'
227
- })
228
- ]
229
- })
225
+ jquery: ' jquery' ,
226
+ }),
227
+ ],
228
+ });
230
229
```
231
230
232
231
Curious about how to ID jQuery when it's a global i.e. you're _ not_ bundling it?
0 commit comments