|
|
|
@@ -2,29 +2,97 @@ |
|
|
|
|
|
|
|
> What could be more logical awesome than no logic at all? |
|
|
|
|
|
|
|
Shamless port of http://github.com/defunkt/mustache |
|
|
|
Shamless port of http://github.com/defunkt/mustache |
|
|
|
by Jan Lehnardt <jan@apache.org>. |
|
|
|
|
|
|
|
Thanks @defunkt for the awesome code. |
|
|
|
|
|
|
|
## 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. |
|
|
|
|
|
|
|
|
|
|
|
## Usage |
|
|
|
A quick example how to use mustache.js: |
|
|
|
|
|
|
|
// load mustache.js |
|
|
|
|
|
|
|
var view = { |
|
|
|
title: "foo", |
|
|
|
calc: function() { |
|
|
|
return 2 + 4; |
|
|
|
var view = { |
|
|
|
title: "Joe", |
|
|
|
calc: function() { |
|
|
|
return 2 + 4; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
var template = "{{title}} spends {{calc}}"; |
|
|
|
|
|
|
|
var html = Mustache.to_html(template, view); |
|
|
|
|
|
|
|
// whatever you want to do with html |
|
|
|
|
|
|
|
var template = "{{title}} spends {{calc}}"; |
|
|
|
|
|
|
|
var html = Mustache.to_html(template, view); |
|
|
|
|
|
|
|
`template` is a simple string with mustache tags and `view` is a JavaScript object containing the. |
|
|
|
|
|
|
|
## Template Tag Types |
|
|
|
There are several types of tags currently implemented in mustache.js. |
|
|
|
|
|
|
|
### Simple Tags |
|
|
|
Tags are always surrounded by mustaches like this `{{foobar}}`. |
|
|
|
|
|
|
|
var view = {name: "Joe", say_hello: function(){ return "hello" }} |
|
|
|
|
|
|
|
template = "{{say_hello}}, {{name}}" |
|
|
|
|
|
|
|
### 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. |
|
|
|
|
|
|
|
var view = {condition: function() { |
|
|
|
// [...your code goes here...] |
|
|
|
return true; |
|
|
|
}} |
|
|
|
|
|
|
|
{{#condition}} |
|
|
|
I will be visible if condition is true |
|
|
|
{{/condition}} |
|
|
|
|
|
|
|
### 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. |
|
|
|
|
|
|
|
var view = {name: "Joe's shopping card", |
|
|
|
items: ["bananas", "apples"]} |
|
|
|
|
|
|
|
var template = "{{name}}: <ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>" |
|
|
|
|
|
|
|
Outputs: |
|
|
|
Joe's shopping card: <ul><li>bananas</li><li>apples</li></ul> |
|
|
|
|
|
|
|
|
|
|
|
### View Partials |
|
|
|
mustache.js supports a quite powerful but yet simple view partial mechanism. Use the following syntax for partials: `{{<partial_name}}` |
|
|
|
|
|
|
|
var view = {name: "Joe"} |
|
|
|
var template = "Welcome, {{jow}}! {{<winnings}}" |
|
|
|
|
|
|
|
var winnings = {value: 1000, |
|
|
|
taxed_value: function() { |
|
|
|
return this.value - (this.value * 0.4); |
|
|
|
} |
|
|
|
} |
|
|
|
var winnings_template = "You just won ${{value}} (which is ${{taxed_value}} after tax)" |
|
|
|
|
|
|
|
var output = Mustache.to_html(template, view) |
|
|
|
|
|
|
|
output will be: |
|
|
|
Welcome, Joe! You just won $1000 (which is $600 after tax) |
|
|
|
|
|
|
|
You invoke a partial with `{{<name}}`. When `name` is an object, mustache.js will look for a JavaScript object called `name_template` and uses this for the template and `name` for the view. If `name` is a simple string, mustache.js will simply render the strings context like a normal template. |
|
|
|
|
|
|
|
|
|
|
|
## 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}}}`. |
|
|
|
|
|
|
|
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`. |
|
|
|
|
|
|
|
|
|
|
|
## More Examples and Documentation |
|
|
|
See `examples/` for more goodies and read the [original mustache docs][m] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[m]: http://github.com/defunkt/mustache/ |
|
|
|
[node.js]: http://nodejs.org |
|
|
|
[couchdb]: http://couchdb.apache.org |