If a section key returns a function, it will be called
and passed both the unrendered block of text and a renderer
convenience function.
Given this JS:
"name": "Tater",
"bolder": function() {
return function(text, render) {
return "<b>" + render(text) + '</b>'
}
}
And this template:
{{#bolder}}Hi {{name}}.{{/bolder}}
We'll get this output:
<b>Hi Tater.</b>
As you can see, we're pre-processing the text in the block.
This can be used to implement caching, filters (like syntax
highlighting), etc.
You can use `this.name` to access the attribute `name` from
your view.
tags/0.3.0
| @@ -1,6 +1,7 @@ | |||||
| # mustache.js Changes | # mustache.js Changes | ||||
| ## 0.3.0 (??-??-????) | ## 0.3.0 (??-??-????) | ||||
| * Added higher order sections. | |||||
| ## 0.2.3 (28-03-2010) | ## 0.2.3 (28-03-2010) | ||||
| @@ -88,6 +88,34 @@ the items. Use `{{.}}` to access the current item inside the enumeration section | |||||
| Joe's shopping card: <ul><li>bananas</li><li>apples</li></ul> | Joe's shopping card: <ul><li>bananas</li><li>apples</li></ul> | ||||
| ### Higher Order Sections | |||||
| If a section key returns a function, it will be called and passed both the unrendered | |||||
| block of text and a renderer convenience function. | |||||
| Given this JS: | |||||
| "name": "Tater", | |||||
| "bolder": function() { | |||||
| return function(text, render) { | |||||
| return "<b>" + render(text) + '</b>' | |||||
| } | |||||
| } | |||||
| And this template: | |||||
| {{#bolder}}Hi {{name}}.{{/bolder}} | |||||
| We'll get this output: | |||||
| <b>Hi Tater.</b> | |||||
| As you can see, we're pre-processing the text in the block. This can be used to | |||||
| implement caching, filters (like syntax highlighting), etc. | |||||
| You can use `this.name` to access the attribute `name` from your view. | |||||
| ### View Partials | ### View Partials | ||||
| mustache.js supports a quite powerful but yet simple view partial mechanism. Use the | mustache.js supports a quite powerful but yet simple view partial mechanism. Use the | ||||
| @@ -0,0 +1 @@ | |||||
| {{#bolder}}Hi {{name}}.{{/bolder}} | |||||
| @@ -0,0 +1,9 @@ | |||||
| var higher_order_sections = { | |||||
| "name": "Tater", | |||||
| "helper": "To tinker?", | |||||
| "bolder": function() { | |||||
| return function(text, render) { | |||||
| return "<b>" + render(text) + '</b> ' + this.helper; | |||||
| } | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1 @@ | |||||
| <b>Hi Tater.</b> To tinker? | |||||
| @@ -109,6 +109,11 @@ var Mustache = function() { | |||||
| return that.render(content, that.merge(context, | return that.render(content, that.merge(context, | ||||
| that.create_context(row)), partials, true); | that.create_context(row)), partials, true); | ||||
| }).join(""); | }).join(""); | ||||
| } else if(typeof value === "function") { | |||||
| // higher order section | |||||
| return value.call(context, content, function(text) { | |||||
| return that.render(text, context, partials, true); | |||||
| }) | |||||
| } else if(value) { // boolean section | } else if(value) { // boolean section | ||||
| return that.render(content, context, partials, true); | return that.render(content, context, partials, true); | ||||
| } else { | } else { | ||||