|
1 |
| -# mustache.js — Logic-less templates with JavaScript |
| 1 | +# mustache.js — Logic-less {{mustache}} templates with JavaScript |
2 | 2 |
|
3 | 3 | > What could be more logical awesome than no logic at all?
|
4 | 4 |
|
5 |
| -For a list of implementations (other than JavaScript) and editor |
6 |
| -plugins, see <http://mustache.github.com/>. |
| 5 | +[mustache.js](http://github.com/janl/mustache.js) is an implementation of the |
| 6 | +[Mustache](http://mustache.github.com/) templating system in JavaScript. |
7 | 7 |
|
| 8 | +[Mustache](http://mustache.github.com/) is a logic-less template syntax. It can |
| 9 | +be used for HTML, config files, source code - anything. It works by expanding |
| 10 | +tags in a template using values provided in a hash or object. |
8 | 11 |
|
9 |
| -## Where to Use? |
| 12 | +We call it "logic-less" because there are no if statements, else clauses, or for |
| 13 | +loops. Instead there are only tags. Some tags are replaced with a value, some |
| 14 | +nothing, and others a series of values. |
10 | 15 |
|
11 |
| -You can use mustache.js rendering stuff in various scenarios. E.g. you can |
12 |
| -render templates in your browser, or rendering server-side stuff with |
13 |
| -[node.js][node.js], use it for rendering stuff in [CouchDB][couchdb]’s views. |
| 16 | +For a language-agnostic overview of Mustache's template syntax, see the |
| 17 | +`mustache(5)` [manpage](http://mustache.github.com/mustache.5.html). |
14 | 18 |
|
| 19 | +## Where to use mustache.js? |
15 | 20 |
|
16 |
| -## Who Uses Mustache? |
| 21 | +You can use mustache.js to render templates in many various scenarios where you |
| 22 | +can use JavaScript. For example, you can render templates in a browser, |
| 23 | +server-side using [node](http://nodejs.org/), in [CouchDB](http://couchdb.apache.org/) |
| 24 | +views, or in almost any other environment where you can use JavaScript. |
17 | 25 |
|
18 |
| -An updated list is kept on the Github wiki. Add yourself, if you use |
19 |
| -mustache.js: <http://wiki.github.com/janl/mustache.js/beard-competition> |
| 26 | +## Who uses mustache.js? |
20 | 27 |
|
| 28 | +An updated list of mustache.js users is kept [on the Github wiki](http://wiki.github.com/janl/mustache.js/beard-competition). |
| 29 | +Add yourself or your company if you use mustache.js! |
21 | 30 |
|
22 | 31 | ## Usage
|
23 | 32 |
|
24 |
| -A quick example how to use mustache.js: |
| 33 | +Below is quick example how to use mustache.js: |
25 | 34 |
|
26 | 35 | var view = {
|
27 | 36 | title: "Joe",
|
28 | 37 | calc: function() {
|
29 | 38 | return 2 + 4;
|
30 | 39 | }
|
31 |
| - } |
32 |
| - |
33 |
| - var template = "{{title}} spends {{calc}}"; |
| 40 | + }; |
34 | 41 |
|
35 |
| - var html = Mustache.to_html(template, view); |
| 42 | + var html = Mustache.to_html("{{title}} spends {{calc}}", view); |
36 | 43 |
|
37 |
| -`template` is a simple string with mustache tags and `view` is a JavaScript |
38 |
| -object containing the data and any code to render the template. |
| 44 | +In this example, the `Mustache.to_html` function takes two parameters: 1) the |
| 45 | +[mustache](http://mustache.github.com/) template and 2) a `view` object that |
| 46 | +contains the data and code needed to render the template. |
39 | 47 |
|
40 | 48 |
|
41 | 49 | ## Template Tag Types
|
42 | 50 |
|
43 | 51 | There are several types of tags currently implemented in mustache.js.
|
44 | 52 |
|
45 |
| -For a language-agnostic overview of Mustache’s template syntax, see the |
46 |
| -`mustache(5)` manpage or <http://mustache.github.com/mustache.5.html>. |
47 |
| - |
48 | 53 | ### Simple Tags
|
49 | 54 |
|
50 | 55 | Tags are always surrounded by mustaches like this `{{foobar}}`.
|
@@ -267,82 +272,48 @@ own iteration marker:
|
267 | 272 | {{bob}}
|
268 | 273 | {{/foo}}
|
269 | 274 |
|
270 |
| -## More Examples and Documentation |
271 |
| - |
272 |
| -See `examples/` for more goodies and read the [original mustache docs][m] |
273 |
| - |
274 |
| -## Command Line |
275 |
| - |
276 |
| -See `mustache(1)` man page or |
277 |
| -<http://defunkt.github.com/mustache/mustache.1.html> |
278 |
| -for command line docs. |
279 |
| - |
280 |
| -Or just install it as a RubyGem: |
281 |
| - |
282 |
| - $ gem install mustache |
283 |
| - $ mustache -h |
284 |
| - |
285 |
| -[m]: http://github.com/defunkt/mustache/#readme |
286 |
| -[node.js]: http://nodejs.org |
287 |
| -[couchdb]: http://couchdb.apache.org |
288 |
| - |
289 |
| - |
290 |
| -## Plugins for jQuery, Dojo, Yui, CommonJS, qooxdoo |
291 |
| - |
292 |
| -This repository lets you build modules for [jQuery][], [Dojo][], [Yui][] and |
293 |
| -[CommonJS][] / [Node.js][] with the help of `rake`. |
294 |
| - |
295 |
| -NOTE: The default `rake` task is only used for testing and require rspec to be |
296 |
| -installed (see below). |
297 |
| - |
298 |
| -Run `rake jquery` to get a jQuery compatible plugin file in the |
299 |
| -`mustache-jquery/` directory. |
300 |
| - |
301 |
| -Run `rake dojo` to get a Dojo compatible plugin file in the `mustache-dojo/` |
302 |
| -directory. |
303 |
| - |
304 |
| -Run `rake yui` to get a Yui compatible plugin file in the `mustache-yui/` |
305 |
| -directory. |
306 |
| - |
307 |
| -Run `rake commonjs` to get a CommonJS compatible plugin file in the |
308 |
| -`mustache-commonjs/` directory which you can also use with [Node.js][]. |
309 |
| - |
310 |
| -Run `rake qooxdoo` to get a qooxdoo compatible file named `qooxdoo.mustache.js`. |
311 |
| - |
312 |
| -## Testing |
313 |
| - |
314 |
| -NOTE: You will need to install rspec first by running `gem install rspec`. |
315 |
| - |
316 |
| -To run the mustache.js test suite, run `rake spec`. All specs will be run first with JavaScriptCore (using `jsc`) |
317 |
| -and again with Rhino, using `java org.mozilla.javascript.tools.shell.Main`. |
318 |
| - |
319 |
| -JavaScriptCore is used from the OSX default location: |
320 |
| - |
321 |
| - /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc |
322 |
| - |
323 |
| -To install Rhino on OSX, follow [these instructions](Rhino Install). |
324 |
| - |
325 |
| -### Adding Tests |
326 |
| - |
327 |
| -Tests are located in the `examples/` directory. Adding a new test requires three files. Here's an example to add a test named "foo": |
328 |
| - |
329 |
| -`examples/foo.html` (the template): |
330 |
| - |
331 |
| - foo {{bar}} |
332 |
| - |
333 |
| -`examples/foo.js` (the view context): |
334 |
| - |
335 |
| - var foo = { |
336 |
| - bar: "baz" |
337 |
| - }; |
338 |
| - |
339 |
| -`examples/foo.txt` (the expected output): |
340 |
| - |
341 |
| - foo baz |
342 |
| - |
343 |
| -[jQuery]: http://jquery.com/ |
344 |
| -[Dojo]: http://www.dojotoolkit.org/ |
345 |
| -[Yui]: http://developer.yahoo.com/yui/ |
346 |
| -[CommonJS]: http://www.commonjs.org/ |
347 |
| -[Node.js]: http://nodejs.org/ |
348 |
| -[Rhino Install]: http://michaux.ca/articles/installing-rhino-on-os-x |
| 275 | +## Plugins for JavaScript Libraries |
| 276 | + |
| 277 | +mustache.js may be built specifically for several different client libraries |
| 278 | +and platforms, including the following: |
| 279 | + |
| 280 | + - [node](http://nodejs.org/) (or other CommonJS platforms) |
| 281 | + - [jQuery](http://jquery.com/) |
| 282 | + - [Dojo](http://www.dojotoolkit.org/) |
| 283 | + - [YUI](http://developer.yahoo.com/yui/) |
| 284 | + - [RequireJS](http://requirejs.org/) |
| 285 | + - [qooxdoo](http://qooxdoo.org/) |
| 286 | + |
| 287 | +These may be built using [Rake](http://rake.rubyforge.org/) and one of the |
| 288 | +following commands: |
| 289 | + |
| 290 | + $ rake commonjs |
| 291 | + $ rake jquery |
| 292 | + $ rake dojo |
| 293 | + $ rake yui |
| 294 | + $ rake requirejs |
| 295 | + $ rake qooxdoo |
| 296 | + |
| 297 | +## Thanks |
| 298 | + |
| 299 | +Mustache.js wouldn't kick ass if it weren't for these fine souls: |
| 300 | + |
| 301 | + * Chris Wanstrath / defunkt |
| 302 | + * Alexander Lang / langalex |
| 303 | + * Sebastian Cohnen / tisba |
| 304 | + * J Chris Anderson / jchris |
| 305 | + * Tom Robinson / tlrobinson |
| 306 | + * Aaron Quint / quirkey |
| 307 | + * Douglas Crockford |
| 308 | + * Nikita Vasilyev / NV |
| 309 | + * Elise Wood / glytch |
| 310 | + * Damien Mathieu / dmathieu |
| 311 | + * Jakub Kuźma / qoobaa |
| 312 | + * Will Leinweber / will |
| 313 | + * dpree |
| 314 | + * Jason Smith / jhs |
| 315 | + * Aaron Gibralter / agibralter |
| 316 | + * Ross Boucher / boucher |
| 317 | + * Matt Sanford / mzsanford |
| 318 | + * Ben Cherry / bcherry |
| 319 | + * Michael Jackson / mjijackson |
0 commit comments