Ember issue #1648

by Hari Menon

HTML

<script src="http://files.pinkhearted.com/handlebars-1.0.0.beta.6.js"></script>
<script src="http://files.pinkhearted.com/ember.min.js"></script>
<script src="http://files.pinkhearted.com/ember-data.js"></script>
<style>
    ul { list-style-type: disc; padding-left: 20px; }
    .container { margin-top: 20px; }
</style>

  <script type="text/x-handlebars" data-template-name="application">
    <h1>Contributors</h1>
    <ul>
      <li>{{#linkTo index}}Home{{/linkTo}}</li>
      <li>{{#linkTo about}}About{{/linkTo}}</li>
    </ul>

    <div class="container">
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>List</h2>

    <ul>
    {{#each contributor in controller}}
      <li>{{#linkTo contributorIndex contributor}}{{contributor.login}}{{/linkTo}}</li>
    {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="contributor">
    <h2>Contributor</h2>

    <p>Login: {{login}}</p>
    <img {{bindAttr src="avatar_url"}} />

    <ul>
      <li>{{#linkTo details}}Details{{/linkTo}}</li>
      <li>{{#linkTo repos}}Repos{{/linkTo}}</li>
    </ul>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="details">
    details
  </script>

  <script type="text/x-handlebars" data-template-name="repos">
    repos
  </script>

  <script type="text/x-handlebars" data-template-name="about">
    <h2>About</h2>

    <p>About this cool page.</p>
  </script>

JavaScript

var App = Ember.Application.create();

App.IndexController = Ember.ArrayController.extend();
App.IndexView = Ember.View.extend({
  templateName: 'index'
});

App.ContributorContributorController = Ember.ObjectController.extend();

App.GitHubAdapter = DS.Adapter.create({
  find: function(store, type, id) {
    var url = type.url;

    $.ajax({
      url:      url,
      dataType: 'jsonp',
      context:  store,
      success:  function(response){
        this.load(type, id, response.data.filterProperty('id', parseInt(id))[0]);
      }
    });
  },

  findAll: function(store, type) {
    var url = type.url;

    $.ajax({
      url:      url,
      dataType: 'jsonp',
      context:  store,
      success:  function(response){
        this.loadMany(type, response.data);
      }
    });
  }
});

App.Store = DS.Store.extend({
  revision: 11,
  adapter: App.GitHubAdapter
});

App.Contributor = DS.Model.extend({
  login:         DS.attr('string'),
  avatar_url:    DS.attr('string'),
  contributions: DS.attr('number'),
});

App.Contributor.reopenClass({
  url: "https://api.github.com/repos/mhfs/sidekiq-failures/contributors"
});

App.Router.map(function(match) {
  match('/').to('index');
  match('/about').to('about');
  match('/contributor/:contributor_id').to('contributor', function(match){
    match('/').to('contributorIndex');
    match('/details').to('details');
    match('/repos').to('repos');
  });
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Contributor.find();
  }
});

App.ContributorIndexRoute = Ember.Route.extend({
  renderTemplates: function() {
    this.render({ into: 'contributor' });
  }        
});


App.DetailsRoute = Ember.Route.extend({
  renderTemplates: function() {
    this.render({ into: 'contributor' });
  }        
});

App.ReposRoute = Ember.Route.extend({
  renderTemplates: function() {
    this.render({ into: 'contributor' });
  }        
});