Created
September 11, 2012 06:21
-
-
Save getify/3696453 to your computer and use it in GitHub Desktop.
how does your templating approach handle this task?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"settings" : { | |
"foo" : "low", | |
"bar" : "high", | |
"baz" : "low" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
NOTE: see this comment for clarification of why this | |
scenario is structured this way intentionally: | |
https://gist.github.com/3696453#gistcomment-570903 | |
Scenario: | |
Given the data structure above in "1.json", how would you | |
use a templating engine to generate this snippet of html | |
as a string? NOTE: the spirit of this question is to | |
generate a string of markup with a template engine, NOT | |
to do DOM manipulation. Imagine needing to generate this | |
kind of markup server-side to send over the wire. | |
--> | |
<h1>Settings</h1> | |
<h2>foo</h2> | |
<input type="radio" name="foo" value="low" checked> low | |
<input type="radio" name="foo" value="high"> high | |
<h2>bar</h2> | |
<input type="radio" name="bar" value="low"> low | |
<input type="radio" name="bar" value="high" checked> high | |
<h2>baz</h2> | |
<input type="radio" name="baz" value="low" checked> low | |
<input type="radio" name="baz" value="high"> high | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
here's how "grips" template engine would handle this scenario: | |
https://gist.github.com/3706912 |
For reference, I created a Gist that shows the input Raptor template, the generated HTML and the compiled template:
https://gist.github.com/3966647
--Patrick
Thanks so much Patrick! Very much appreciate the input for Raptor. :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As requested, here's the solution for Raptor Templates. The below template will produce the exact output (less extra whitespace):
Admittedly, it is a little odd to use "null" as the value for attributes that do not have a value in the resulting HTML, but it works. However, I prefer to to output checked="checked" at the expense of a few extra bytes since it's cleaner in my implementation and it still produces valid HTML:
You can easily try out the templates online at http://raptorjs.org/raptor-templates/try-online/
Let me know what you think.
Thanks,
Patrick