diff --git a/README.md b/README.md index 4ce62fc..b435bb7 100644 --- a/README.md +++ b/README.md @@ -24,14 +24,16 @@ An updated list of mustache.js users is kept [on the Github wiki](http://wiki.gi Below is quick example how to use mustache.js: - var view = { - title: "Joe", - calc: function () { - return 2 + 4; - } - }; +```js +var view = { + title: "Joe", + calc: function () { + return 2 + 4; + } +}; - var output = Mustache.render("{{title}} spends {{calc}}", view); +var output = Mustache.render("{{title}} spends {{calc}}", view); +``` In this example, the `Mustache.render` function takes two parameters: 1) the [mustache](http://mustache.github.com/) template and 2) a `view` object that contains the data and code needed to render the template. @@ -49,48 +51,60 @@ All variables are HTML-escaped by default. If you want to render unescaped HTML, View: - { - "name": "Chris", - "company": "GitHub" - } +```json +{ + "name": "Chris", + "company": "GitHub" +} +``` Template: - * {{name}} - * {{age}} - * {{company}} - * {{{company}}} - * {{&company}} +```html +* {{name}} +* {{age}} +* {{company}} +* {{{company}}} +* {{&company}} +``` Output: - * Chris - * - * <b>GitHub</b> - * GitHub - * GitHub +```html +* Chris +* +* <b>GitHub</b> +* GitHub +* GitHub +``` JavaScript's dot notation may be used to access keys that are properties of objects in a view. View: - { - "name": { - "first": "Michael", - "last": "Jackson" - }, - "age": "RIP" - } +```json +{ + "name": { + "first": "Michael", + "last": "Jackson" + }, + "age": "RIP" +} +``` Template: - * {{name.first}} {{name.last}} - * {{age}} +```html +* {{name.first}} {{name.last}} +* {{age}} +``` Output: - * Michael Jackson - * RIP +```html +* Michael Jackson +* RIP +``` ### Sections @@ -106,20 +120,26 @@ If the `person` key does not exist, or exists and has a value of `null`, `undefi View: - { - "person": false - } +```json +{ + "person": false +} +``` Template: - Shown. - {{#person}} - Never shown! - {{/person}} +```html +Shown. +{{#person}} +Never shown! +{{/person}} +``` Output: - Shown. +```html +Shown. +``` #### Non-Empty Lists @@ -129,75 +149,93 @@ When the value is a list, the block is rendered once for each item in the list. View: - { - "stooges": [ - { "name": "Moe" }, - { "name": "Larry" }, - { "name": "Curly" } - ] - } +```json +{ + "stooges": [ + { "name": "Moe" }, + { "name": "Larry" }, + { "name": "Curly" } + ] +} +``` Template: - {{#stooges}} - {{name}} - {{/stooges}} +```html +{{#stooges}} +{{name}} +{{/stooges}} +``` Output: - Moe - Larry - Curly +```html +Moe +Larry +Curly +``` When looping over an array of strings, a `.` can be used to refer to the current item in the list. View: - { - "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] - } +```json +{ + "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] +} +``` Template: - {{#musketeers}} - * {{.}} - {{/musketeers}} +```html +{{#musketeers}} +* {{.}} +{{/musketeers}} +``` Output: - * Athos - * Aramis - * Porthos - * D'Artagnan +```html +* Athos +* Aramis +* Porthos +* D'Artagnan +``` If the value of a section variable is a function, it will be called in the context of the current item in the list on each iteration. View: - { - "beatles": [ - { "firstName": "John", "lastName": "Lennon" }, - { "firstName": "Paul", "lastName": "McCartney" }, - { "firstName": "George", "lastName": "Harrison" }, - { "firstName": "Ringo", "lastName": "Starr" } - ], - "name": function () { - return this.firstName + " " + this.lastName; - } - } +```json +{ + "beatles": [ + { "firstName": "John", "lastName": "Lennon" }, + { "firstName": "Paul", "lastName": "McCartney" }, + { "firstName": "George", "lastName": "Harrison" }, + { "firstName": "Ringo", "lastName": "Starr" } + ], + "name": function () { + return this.firstName + " " + this.lastName; + } +} +``` Template: - {{#beatles}} - * {{name}} - {{/beatles}} +```html +{{#beatles}} +* {{name}} +{{/beatles}} +``` Output: - * John Lennon - * Paul McCartney - * George Harrison - * Ringo Starr +```html +* John Lennon +* Paul McCartney +* George Harrison +* Ringo Starr +``` #### Functions @@ -205,22 +243,28 @@ If the value of a section key is a function, it is called with the section's lit View: - { - "name": "Tater", - "bold": function () { - return function (text, render) { - return "" + render(text) + ""; - } - } +```js +{ + "name": "Tater", + "bold": function () { + return function (text, render) { + return "" + render(text) + ""; } + } +} +``` Template: - {{#bold}}Hi {{name}}.{{/bold}} +```html +{{#bold}}Hi {{name}}.{{/bold}} +``` Output: - Hi Tater. +```html +Hi Tater. +``` ### Inverted Sections @@ -228,28 +272,38 @@ An inverted section opens with `{{^section}}` instead of `{{#section}}`. The blo View: - { - "repos": [] - } +```json +{ + "repos": [] +} +``` Template: - {{#repos}}{{name}}{{/repos}} - {{^repos}}No repos :({{/repos}} +```html +{{#repos}}{{name}}{{/repos}} +{{^repos}}No repos :({{/repos}} +``` Output: - No repos :( +```html +No repos :( +``` ### Comments Comments begin with a bang and are ignored. The following template: -