Last active
December 10, 2015 11:48
-
-
Save hrldcpr/4429798 to your computer and use it in GitHub Desktop.
example of trying to use svg in meteor
This file contains hidden or 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
| <head> | |
| <title>Leaderboard</title> | |
| </head> | |
| <body> | |
| <div id="outer"> | |
| {{> leaderboard}} | |
| </div> | |
| </body> | |
| <template name="leaderboard"> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> | |
| <!-- this works because the browser parses it in the context of its enclosing namespace --> | |
| <circle cx="50" cy="50" r="10" fill="blue" /> | |
| {{#each players}} | |
| <!-- this doesn't work because the circle node needs to be created with createElementNS("http://www.w3.org/2000/svg", "circle") --> | |
| <circle cx="{{score}}" cy="{{score}}" r="{{score}}" fill="red" /> | |
| {{/each}} | |
| </svg> | |
| <div class="leaderboard"> | |
| {{#each players}} | |
| {{> player}} | |
| {{/each}} | |
| </div> | |
| {{#if selected_name}} | |
| <div class="details"> | |
| <div class="name">{{selected_name}}</div> | |
| <input type="button" class="inc" value="Give 5 points" /> | |
| </div> | |
| {{/if}} | |
| {{#unless selected_name}} | |
| <div class="none">Click a player to select</div> | |
| {{/unless}} | |
| </template> | |
| <template name="player"> | |
| <div class="player {{selected}}"> | |
| <span class="name">{{name}}</span> | |
| <span class="score">{{score}}</span> | |
| </div> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment