diff --git a/README.md b/README.md index 6e634b6..59c572e 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,12 @@ by Jan Lehnardt . 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. + +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? @@ -17,6 +21,7 @@ An updated list is kept on the Github wiki. Add yourself, if you use mustache.js ## Usage + A quick example how to use mustache.js: var view = { @@ -29,21 +34,30 @@ A quick example how to use mustache.js: 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. + +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...] @@ -54,8 +68,13 @@ Conditional sections begin with `{{#condition}}` and end with `{{/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. + +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"]} @@ -67,7 +86,9 @@ Enumerable Sections use the same syntax as condition sections do. `{{#shopping_i ### 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 = { 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 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) - + output will be: 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 use that object as the context for the template found in `partials` for `winnings`. + ## 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`. + ## 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) { print(line); @@ -105,8 +134,8 @@ To stream template results out of mustache.js, you can pass an optional `send()` ## 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