/jsbin.OxIDiVU.css

## jsbin.OxIDiVU.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.OxIDiVU.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
{{link-to 'Surveys' 'survey'}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="survey">
    <ul>
    {{#each item in model}}
      <li>{{#link-to 'survey-sheet' item}}{{item.color}}{{/link-to}}</li>
    {{/each}}
    </ul>
    {{#if next}}
    Next {{link-to next.color 'survey-sheet'}}
    {{/if}}
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="survey-sheet">

  <br>
  <h1>Survey Sheet</h1>
  {{color}}


  </script>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0-beta.4/ember-data.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
</body>
</html>

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

App.Router.map(function() {
  this.resource('survey', { path: '/survey' }, function(){
    this.resource( 'survey-sheet', { path: '/survey-sheets/:id' });
  });
});

App.SurveyRoute = Ember.Route.extend({
  model: function() {
    return this.get('store').find('color');
  },
  actions:{
    setSurveySheet: function(survey) {
      var controller = this.get('controller'),
           model = controller.get('model'),
          len = model.get('length'),
          nextLoc = model.indexOf(survey),
          nextIdx = ++nextLoc >= len ? 0: nextLoc,
          nextItem = model.objectAt(nextIdx);
      controller.set('next', nextItem);
  }
  }
});
App.SurveySheetRoute = Ember.Route.extend({
  model: function(params) {
    return this.get('store').find('color', params.id);
  },
  setupController: function(controller,model){
    this._super(controller, model);
    var surveyController = this.controllerFor('survey');
    surveyController.send('setSurveySheet', model);
  }
});

App.ApplicationAdapter= DS.RESTAdapter;

App.Color = DS.Model.extend({
    color: DS.attr()
});

$.mockjax({
    url:  '/colors',
    dataType: 'json',
  responseText: {
    colors:[
      {
        id: 1,
        color: "red"
      },
      {
        id: 2,
        color: "green"
      },
      {
        id: 3,
        color: "blue"
      }
     ]
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Welcome to Ember.js</h2>
	{{link-to 'Surveys' 'survey'}}
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="survey">
	<ul>
	{{#each item in model}}
	<li>{{#link-to 'survey-sheet' item}}{{item.color}}{{/link-to}}</li>
	{{/each}}
	</ul>
	{{#if next}}
	Next {{link-to next.color 'survey-sheet'}}
	{{/if}}
	{{outlet}}
	</script>
	<script type="text/x-handlebars" data-template-name="survey-sheet">

	<br>
	<h1>Survey Sheet</h1>
	{{color}}


	</script>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.0.0-beta.4/ember-data.min.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	this.resource('survey', { path: '/survey' }, function(){
	this.resource( 'survey-sheet', { path: '/survey-sheets/:id' });
	});
	});

	App.SurveyRoute = Ember.Route.extend({
	model: function() {
	return this.get('store').find('color');
	},
	actions:{
	setSurveySheet: function(survey) {
	var controller = this.get('controller'),
	model = controller.get('model'),
	len = model.get('length'),
	nextLoc = model.indexOf(survey),
	nextIdx = ++nextLoc >= len ? 0: nextLoc,
	nextItem = model.objectAt(nextIdx);
	controller.set('next', nextItem);
	}
	}
	});
	App.SurveySheetRoute = Ember.Route.extend({
	model: function(params) {
	return this.get('store').find('color', params.id);
	},
	setupController: function(controller,model){
	this._super(controller, model);
	var surveyController = this.controllerFor('survey');
	surveyController.send('setSurveySheet', model);
	}
	});

	App.ApplicationAdapter= DS.RESTAdapter;

	App.Color = DS.Model.extend({
	color: DS.attr()
	});

	$.mockjax({
	url: '/colors',
	dataType: 'json',
	responseText: {
	colors:[
	{
	id: 1,
	color: "red"
	},
	{
	id: 2,
	color: "green"
	},
	{
	id: 3,
	color: "blue"
	}
	]
	}
	});