Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
/* Put your CSS here */
html, body {
margin: 20px;
<!DOCTYPE html>
<meta name="description" content="Color Vault" />
<meta charset="utf-8">
<title>Color Vault</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script type="text/x-handlebars" data-template-name="application">
<h2>Color Vault</h2>
<script type="text/x-handlebars" data-template-name="index">
<p>Wanna see some cool {{#link-to "colors"}}colors?{{/link-to}}</p>
<script type="text/x-handlebars" data-template-name="colors">
<h1>The Colors LUKE!</h1>
<script type="text/x-handlebars" data-template-name="colors/index">
{{#each item in model}}
<li>{{#link-to "color" item}}{{item.color}}{{/link-to}}</li>
<script type="text/x-handlebars" data-template-name="color">
<h1>Lots more info about {{model.color}}</h1>
<p>Its {{model.color}} what else do you need to know?</p>
App = Ember.Application.create({
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Color = DS.Model.extend({
color: DS.attr( 'string' )
App.Color.FIXTURES = [
{id: 1, color:"red"},
{id: 2, color:"yellow"},
{id: 3, color:"blue"},
]; {
this.resource("colors", function(){
this.resource("color", {path: "/:colors_id"}, function() {});
App.ColorsRoute = Ember.Route.extend({
model: function() {
App.ColorRoute = Ember.Route.extend({
model: function(params) {
return"color", params.colors_id);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment