Skip to content
Browse files

Dear Mou, never use tabs again. Sincerely, a sane coder.

  • Loading branch information...
1 parent e77bf75 commit 4a51f09836362c97242857487fc107fa69d8c04e @chbrown committed
Showing with 81 additions and 81 deletions.
  1. +81 −81 README.md
View
162 README.md
@@ -2,69 +2,69 @@
Mustache is a simple, restricted, fast template language inspired by [ctemplate](http://code.google.com/p/google-ctemplate/). There is a great introduction to the language [here on github](http://mustache.github.com/mustache.5.html). And a nice overview of the different tags at the [ruby implementation](http://github.com/defunkt/mustache/).
-Amulet began as a fork of the v2 branch of [raycmorgan](https://github.com/raycmorgan)'s [Mu](https://github.com/raycmorgan/Mu). I eventually changed so much of the API that I decided to rename it.
+Amulet began as a fork of the v2 branch of [raycmorgan](https://github.com/raycmorgan)'s [Mu](https://github.com/raycmorgan/Mu). I eventually changed so much of the API that I decided to rename it.
Amulet attempts/intends to implement all of the Mustache specification, except that it does not always honor the whitespace requirements, which, for the purposes of HTML, does not matter. (Obeying the white-space conventions is on the to-do list.)
### Quickstart guide:
*layout.mu*
- <!DOCTYPE html>
- <meta name="engine" content="amulet">
- <div id="container">
- {{<}}
- </div>
+ <!DOCTYPE html>
+ <meta name="engine" content="amulet">
+ <div id="container">
+ {{<}}
+ </div>
*hello.mu*
- <p>Hello world!</p>
-
+ <p>Hello world!</p>
+
*fib.mu*
- <h2>{{header}}</h2> {{{spacer}}}
- <!-- the spacers are there just to convince
- your browser that it has enough content
- to merit rendering -->
-
- <p>One: {{one}}</p> {{{spacer}}}
- <p>Ten: {{ten}}</p> {{{spacer}}}
- <p>Hundred: {{hundred}}</p> {{{spacer}}}
- <p>Thousand: {{thousand}}</p>
+ <h2>{{header}}</h2> {{{spacer}}}
+ <!-- the spacers are there just to convince
+ your browser that it has enough content
+ to merit rendering -->
+
+ <p>One: {{one}}</p> {{{spacer}}}
+ <p>Ten: {{ten}}</p> {{{spacer}}}
+ <p>Hundred: {{hundred}}</p> {{{spacer}}}
+ <p>Thousand: {{thousand}}</p>
*app.js*
- var amulet = require('amulet');
- var spacer = (new Array(100)).join('&nbsp;');
- require('http').createServer(function(req, res) {
- if (req.url === '/fib') {
- res.writeHead(200, {'Content-Type': 'text/html'});
- var context = {header: 'Fibonacci sequence', spacer: spacer};
- var renderer = amulet.render(res, ['layout.mu', 'fib.mu'], context, true);
- var a = 0, b = 1, c = -1, i = 0;
- (function next() {
- for (var j = 0; j < 500000; j++) {
- var dummy = Math.random();
- }
- c = a + b;
- a = b;
- b = c;
- if (i === 1)
- renderer.extendContext({one: c});
- if (i === 10)
- renderer.extendContext({ten: c});
- if (i === 100)
- renderer.extendContext({hundred: c});
- if (i === 1000)
- renderer.extendContext({thousand: c});
- i++;
- if (i < 1001)
- process.nextTick(next);
- })();
- }
- else {
- amulet.render(res, ['layout.mu', 'hello.mu']);
- }
- }).listen(8080);
+ var amulet = require('amulet');
+ var spacer = (new Array(100)).join('&nbsp;');
+ require('http').createServer(function(req, res) {
+ if (req.url === '/fib') {
+ res.writeHead(200, {'Content-Type': 'text/html'});
+ var context = {header: 'Fibonacci sequence', spacer: spacer};
+ var renderer = amulet.render(res, ['layout.mu', 'fib.mu'], context, true);
+ var a = 0, b = 1, c = -1, i = 0;
+ (function next() {
+ for (var j = 0; j < 500000; j++) {
+ var dummy = Math.random();
+ }
+ c = a + b;
+ a = b;
+ b = c;
+ if (i === 1)
+ renderer.extendContext({one: c});
+ if (i === 10)
+ renderer.extendContext({ten: c});
+ if (i === 100)
+ renderer.extendContext({hundred: c});
+ if (i === 1000)
+ renderer.extendContext({thousand: c});
+ i++;
+ if (i < 1001)
+ process.nextTick(next);
+ })();
+ }
+ else {
+ amulet.render(res, ['layout.mu', 'hello.mu']);
+ }
+ }).listen(8080);
This example code can be found in `example/`
@@ -87,7 +87,7 @@ With single template:
`amulet.render` always returns a Renderer object, which is useful if you want a way to add context or force it to end.
*one.mu*
-
+
<h3>{{first}} {{last}}</h3>
<p>{{description}}</p>
@@ -108,7 +108,7 @@ Which sets `asap` to false, and immediately streams through the rest of your tem
## Why Amulet when there's [Mu](https://github.com/raycmorgan/Mu)?
-[Mu](https://github.com/raycmorgan/Mu) is faster for certain benchmarks, because the template rendering itself is synchronous. Amulet does everything A.S.A.P. (as soon as possible), so it will start rendering your templates before any of your context variables are available, only halting when it encounters a missing variable. This functionality is optional -- if you want to render a template with one command, you still can.
+[Mu](https://github.com/raycmorgan/Mu) is faster for certain benchmarks, because the template rendering itself is synchronous. Amulet does everything A.S.A.P. (as soon as possible), so it will start rendering your templates before any of your context variables are available, only halting when it encounters a missing variable. This functionality is optional -- if you want to render a template with one command, you still can.
PHP appears so fast (while sucking so much at everything else) because it renders as soon as possible, so that the top 90% of the page gets rendered before some cpu-intensive bit gets called to render the footer. That's what Amulet does, too, basically.
@@ -132,35 +132,35 @@ Amulet is Mustache and then some:
If a method is in global scope, you can pipe a variable through it:
- <pre>{{{doc | JSON.stringify}}}</pre>
+ <pre>{{{doc | JSON.stringify}}}</pre>
-Which would return something like
+Which would return something like
- <pre>{"_id": "0x1"}</pre>
+ <pre>{"_id": "0x1"}</pre>
### Object notation
Instead of having to nest sections to dig into an object:
- {{#obj}}
- {{#prop}}
- {{val}}
- {{/prop}}
- {{/obj}}
-
+ {{#obj}}
+ {{#prop}}
+ {{val}}
+ {{/prop}}
+ {{/obj}}
+
You can just dot a path. Like javascript.
- {{obj.prop.val}}
-
+ {{obj.prop.val}}
+
### DRY
Don't repeat yourself; namely, don't use XML-type redundancy. A Mustache template is a directed acyclic graph (DAG), i.e. a tree, meaning that a closing node is never ambiguous. You needn't tell the Amulet parser what you're closing. It already knows.
- {{#obj}}
- {{#prop}}
- {{val}}
- {{/}}
- {{/}}
+ {{#obj}}
+ {{#prop}}
+ {{val}}
+ {{/}}
+ {{/}}
### Yields
@@ -168,34 +168,34 @@ When rendering a template hierarchy, use a `<` in your master layout (the opposi
*layout.mu*
- <!DOCTYPE html>
- {{<}}
+ <!DOCTYPE html>
+ {{<}}
*index.mu*
- <p>Just the facts.</p>
-
+ <p>Just the facts.</p>
+
Output of `amulet.render(response, ['layout.mu', 'index.mu'])`:
- <!DOCTYPE html>
- <p>Just the facts.</p>
-
+ <!DOCTYPE html>
+ <p>Just the facts.</p>
+
To make it easier to remember what `<` does, you can also write `{{<yield}}` or even `{{<yield/>}}` to make your syntax highlighter happy. As soon as the parser sees the `<` character, it will skip to the end of the mustache tag.
### Arrows
To keep better track of scope, you can name your sectioned variables with the `->` symbol:
- {{#people -> person}}
- {{person.first_name}}
- {{/}}
+ {{#people -> person}}
+ {{person.first_name}}
+ {{/}}
Otherwise, you can access the local scope nakedly or with a `_`:
- {{#people}}
- {{_.first_name}}
- {{last_name}}
- {{/}}
+ {{#people}}
+ {{_.first_name}}
+ {{last_name}}
+ {{/}}
# License

0 comments on commit 4a51f09

Please sign in to comment.
Something went wrong with that request. Please try again.