| @@ -7,8 +7,12 @@ by Jan Lehnardt <jan@apache.org>. | |||||
| Thanks @defunkt for the awesome code. | Thanks @defunkt for the awesome code. | ||||
| ## Where to Use? | ## Where to Use? | ||||
| You can use mustache.js rendering stuff in various scenarios. E.g. you can render templates in your browser, or rendering server-side stuff with [node.js][node.js], use it for rendering stuff in [CouchDB][couchdb]'s views. | |||||
| You can use mustache.js rendering stuff in various scenarios. E.g. you can render | |||||
| templates in your browser, or rendering server-side stuff with [node.js][node.js], | |||||
| use it for rendering stuff in [CouchDB][couchdb]'s views. | |||||
| ## Who Uses Mustache? | ## Who Uses Mustache? | ||||
| @@ -17,6 +21,7 @@ An updated list is kept on the Github wiki. Add yourself, if you use mustache.js | |||||
| ## Usage | ## Usage | ||||
| A quick example how to use mustache.js: | A quick example how to use mustache.js: | ||||
| var view = { | var view = { | ||||
| @@ -29,21 +34,30 @@ A quick example how to use mustache.js: | |||||
| var template = "{{title}} spends {{calc}}"; | var template = "{{title}} spends {{calc}}"; | ||||
| var html = Mustache.to_html(template, view); | var html = Mustache.to_html(template, view); | ||||
| `template` is a simple string with mustache tags and `view` is a JavaScript object containing the. | `template` is a simple string with mustache tags and `view` is a JavaScript object containing the. | ||||
| ## Template Tag Types | ## Template Tag Types | ||||
| There are several types of tags currently implemented in mustache.js. | There are several types of tags currently implemented in mustache.js. | ||||
| ### Simple Tags | ### Simple Tags | ||||
| Tags are always surrounded by mustaches like this `{{foobar}}`. | Tags are always surrounded by mustaches like this `{{foobar}}`. | ||||
| var view = {name: "Joe", say_hello: function(){ return "hello" }} | var view = {name: "Joe", say_hello: function(){ return "hello" }} | ||||
| template = "{{say_hello}}, {{name}}" | template = "{{say_hello}}, {{name}}" | ||||
| ### Conditional Sections | ### Conditional Sections | ||||
| Conditional sections begin with `{{#condition}}` and end with `{{/condition}}`. When `condition` evaluates to true, the section is rendered, otherwise the hole block will output nothing at all. `condition` may be a function returning true/false or a simple boolean. | |||||
| Conditional sections begin with `{{#condition}}` and end with `{{/condition}}`. When | |||||
| `condition` evaluates to true, the section is rendered, otherwise the hole block will | |||||
| output nothing at all. `condition` may be a function returning true/false or a simple | |||||
| boolean. | |||||
| var view = {condition: function() { | var view = {condition: function() { | ||||
| // [...your code goes here...] | // [...your code goes here...] | ||||
| @@ -54,8 +68,13 @@ Conditional sections begin with `{{#condition}}` and end with `{{/condition}}`. | |||||
| I will be visible if condition is true | I will be visible if condition is true | ||||
| {{/condition}} | {{/condition}} | ||||
| ### Enumerable Sections | ### Enumerable Sections | ||||
| Enumerable Sections use the same syntax as condition sections do. `{{#shopping_items}}` and `{{/shopping_items}}`. Actually the view decides how mustache.js renders the section. If the view returns an array, it will iterator over the items. Use `{{.}}` to access the current item inside the enumeration section. | |||||
| Enumerable Sections use the same syntax as condition sections do. | |||||
| `{{#shopping_items}}` and `{{/shopping_items}}`. Actually the view decides how | |||||
| mustache.js renders the section. If the view returns an array, it will iterator over | |||||
| the items. Use `{{.}}` to access the current item inside the enumeration section. | |||||
| var view = {name: "Joe's shopping card", | var view = {name: "Joe's shopping card", | ||||
| items: ["bananas", "apples"]} | items: ["bananas", "apples"]} | ||||
| @@ -67,7 +86,9 @@ Enumerable Sections use the same syntax as condition sections do. `{{#shopping_i | |||||
| ### View Partials | ### View Partials | ||||
| mustache.js supports a quite powerful but yet simple view partial mechanism. Use the following syntax for partials: `{{>partial_name}}` | |||||
| mustache.js supports a quite powerful but yet simple view partial mechanism. Use the | |||||
| following syntax for partials: `{{>partial_name}}` | |||||
| var view = { | var view = { | ||||
| name: "Joe", | name: "Joe", | ||||
| @@ -80,10 +101,11 @@ mustache.js supports a quite powerful but yet simple view partial mechanism. Use | |||||
| }; | }; | ||||
| var template = "Welcome, {{name}}! {{>winnings}}" | var template = "Welcome, {{name}}! {{>winnings}}" | ||||
| var partials = {winnings: "You just won ${{value}} (which is ${{taxed_value}} after tax)"}; | |||||
| var partials = { | |||||
| winnings: "You just won ${{value}} (which is ${{taxed_value}} after tax)"}; | |||||
| var output = Mustache.to_html(template, view, partials) | var output = Mustache.to_html(template, view, partials) | ||||
| output will be: | output will be: | ||||
| Welcome, Joe! You just won $1000 (which is $600 after tax) | Welcome, Joe! You just won $1000 (which is $600 after tax) | ||||
| @@ -91,13 +113,20 @@ You invoke a partial with `{{>winnings}}`. Invoking the partial `winnings` will | |||||
| mustache.js to look for a object in the context's property `winnings`. It will then | mustache.js to look for a object in the context's property `winnings`. It will then | ||||
| use that object as the context for the template found in `partials` for `winnings`. | use that object as the context for the template found in `partials` for `winnings`. | ||||
| ## Escaping | ## Escaping | ||||
| mustache.js does escape all values when using the standard double mustache syntax. Characters which will be escaped: `& \ " < >`. To disable escaping, simply use tripple mustaches like `{{{unescaped_variable}}}`. | |||||
| mustache.js does escape all values when using the standard double mustache syntax. | |||||
| Characters which will be escaped: `& \ " < >`. To disable escaping, simply use | |||||
| tripple mustaches like `{{{unescaped_variable}}}`. | |||||
| Example: Using `{{variable}}` inside a template for `5 > 2` will result in `5 > 2`, where as the usage of `{{{variable}}}` will result in `5 > 2`. | Example: Using `{{variable}}` inside a template for `5 > 2` will result in `5 > 2`, where as the usage of `{{{variable}}}` will result in `5 > 2`. | ||||
| ## Streaming | ## Streaming | ||||
| To stream template results out of mustache.js, you can pass an optional `send()` callback to the `to_html()` call: | |||||
| To stream template results out of mustache.js, you can pass an optional `send()` | |||||
| callback to the `to_html()` call: | |||||
| Mustache.to_html(template, view, partials, function(line) { | Mustache.to_html(template, view, partials, function(line) { | ||||
| print(line); | print(line); | ||||
| @@ -105,8 +134,8 @@ To stream template results out of mustache.js, you can pass an optional `send()` | |||||
| ## More Examples and Documentation | ## More Examples and Documentation | ||||
| See `examples/` for more goodies and read the [original mustache docs][m] | |||||
| See `examples/` for more goodies and read the [original mustache docs][m] | |||||
| [m]: http://github.com/defunkt/mustache/#readme | [m]: http://github.com/defunkt/mustache/#readme | ||||