hcientist/jsbin.tixez.css

## jsbin.tixez.css
body {
  font-family: Helvetica, Arial, sans-serif;
}


## jsbin.tixez.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="index">
  {{#each}}
    {{#blog-post title=title clr=color beats=beats}}
      {{body}}
    {{/blog-post}}
  {{/each}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/blog-post">
  <article class="blog-post">
    <h1>{{title}}</h1>
    <p>{{yield}}</p>
    <p>Edit title: {{input type="text" value=title}}</p>
    <p>{{clr}}</p>
    <svg height="100" width="100">
      <g transform=translate(50,50)>
      {{# each beats}}
        <path {{bind-attr d=path}} {{bind-attr fill=clr}}/>
      {{/each}}
      </g>
    </svg>
  </article>
  </script>
</body>
</html>

## jsbin.tixez.js
App = Ember.Application.create();


beats = [{
  on: false,
  clr: 'green',
  path: 'M3.122746202247062e-15,-51A51,51 0 0,1 44.16729559300637,25.499999999999993L0,0Z'
}, {
  on: true,
  clr: 'blue',
  path: 'M44.16729559300637,25.499999999999993A51,51 0 0,1 -44.167295593006365,25.500000000000018L0,0Z'
}, {
  on: false,
  clr: 'green',
  path: 'M-44.167295593006365,25.500000000000018A51,51 0 0,1 -9.368238606741186e-15,-51L0,0Z'
}];

posts = [{
  title: "Rails is omakase",
  color: "green",
  body: "There are lots of à la carte software environments in this world.",
  beats: beats
}, {
  title: "Broken Promises",
  color: "red",
  body: "James Coglan wrote a lengthy article about Promises in node.js.",
  beats: beats
}];

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return posts;
  },
  beats: function() {
    return beats;
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<script type="text/x-handlebars" data-template-name="index">
	{{#each}}
	{{#blog-post title=title clr=color beats=beats}}
	{{body}}
	{{/blog-post}}
	{{/each}}
	</script>

	<script type="text/x-handlebars" data-template-name="components/blog-post">
	<article class="blog-post">
	<h1>{{title}}</h1>
	<p>{{yield}}</p>
	<p>Edit title: {{input type="text" value=title}}</p>
	<p>{{clr}}</p>
	<svg height="100" width="100">
	<g transform=translate(50,50)>
	{{# each beats}}
	<path {{bind-attr d=path}} {{bind-attr fill=clr}}/>
	{{/each}}
	</g>
	</svg>
	</article>
	</script>
	</body>
	</html>
	App = Ember.Application.create();



	beats = [{
	on: false,
	clr: 'green',
	path: 'M3.122746202247062e-15,-51A51,51 0 0,1 44.16729559300637,25.499999999999993L0,0Z'
	}, {
	on: true,
	clr: 'blue',
	path: 'M44.16729559300637,25.499999999999993A51,51 0 0,1 -44.167295593006365,25.500000000000018L0,0Z'
	}, {
	on: false,
	clr: 'green',
	path: 'M-44.167295593006365,25.500000000000018A51,51 0 0,1 -9.368238606741186e-15,-51L0,0Z'
	}];

	posts = [{
	title: "Rails is omakase",
	color: "green",
	body: "There are lots of à la carte software environments in this world.",
	beats: beats
	}, {
	title: "Broken Promises",
	color: "red",
	body: "James Coglan wrote a lengthy article about Promises in node.js.",
	beats: beats
	}];

	App.IndexRoute = Ember.Route.extend({
	model: function() {
	return posts;
	},
	beats: function() {
	return beats;
	}
	});