Individually Loaded extra columns for a collection

controllers.application.js

import Ember from 'ember';

const MOCK_ITEMS = [
  {
    id: '1',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:1',
      name: 'Taylor',
      count: 25
    }
  },
  {
    id: '2',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:2',
      name: 'Brian',
      count: 24
    }
  },
  {
    id: '3',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:3',
      name: 'Michelle',
      count: 23
    }
  },
  {
    id: '4',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:4',
      name: 'Evan',
      count: 26
    }
  },
  {
    id: '5',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:5',
      name: 'Teddy',
      count: 28
    }
  },
  {
    id: '6',
    type: 'primary-collection-item',
    attributes: {
      urn: 'urn:item:6',
      name: 'Will',
      count: 27
    }
  },
];
const MOCK_PREFERENCES = [
  {
    id: '1',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:1',
      favoriteColor: 'Pink'
    }    
  },
  {
    id: '2',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:2',
      favoriteColor: 'Green'
    }    
  },
  {
    id: '3',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:3',
      favoriteColor: 'Purple'
    }    
  },
  {
    id: '4',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:4',
      favoriteColor: 'Blue'
    }    
  },
  {
    id: '5',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:5',
      favoriteColor: 'Orange'
    }    
  },
  {
    id: '6',
    type: 'person-preferences',
    attributes: {
      memberUrn: 'urn:item:6',
      favoriteColor: 'Yellow'
    }    
  },
];

function ref(resources) {
  return resources.map(r => ({ id: r.id, type: r.type }));
}

export default Ember.Controller.extend({
  appName: 'Tays Twiddle',
  
  init() {
    this._super();
    
    this.get('store').push({
      data: {
        id: '1',
        type: 'primary-collection',
        attributes: {
          extraInfo: 'This is a list of team members names'
        },
        relationships: {
          teamMembers: {
            data: ref(MOCK_ITEMS)
          }
        }
      },
      included: [].concat(MOCK_ITEMS, MOCK_PREFERENCES)
    });
  }
});

controllers.my-route.js

import Ember from 'ember';

const {
  Controller,
  computed,
  get
} = Ember;

export default Controller.extend({
  itemsShowing: computed(
    'model.teamMembers',
    'index',
    function() {
      const index = get(this, 'index');
      const store = this.get('store');
      const primaryCollection =  get(this, 'model.teamMembers');
      const itemsShowing = [];
    
      // For the index and index+1 of primaryCollection,
      //  create the new object to show with the data from
      //  the secondary collection
    for (let i = index; i <= index + 1; i++) { 
      const record = primaryCollection.objectAt(i);
			const id = record.get('id');
    	const matchingEntity = store.findRecord('person-preferences', id);
      const item = {
        name: record.get('name'),
        count: record.get('count'),
        extra: matchingEntity,
      }
      
      itemsShowing.push(item);
		}
    
    return itemsShowing;
  }),
  
  index: 0,
});

models.person-preferences.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  memberUrn: attr('string'),
	favoriteColor: attr('string')
});

models.primary-collection-item.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  urn: attr('string'),
  name: attr('string'),
  count: attr('number')
});

models.primary-collection.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  
  extraInfo: attr('string'),
  
  teamMembers: hasMany('primary-collection-item')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
    this.route('my-route', { path: '/' });
});

export default Router;

routes.my-route.js

import Ember from 'ember';

const {
  get,
  Route,
  set
} = Ember;

// The twiddle is displaying a list of team members from the 
//  primary-collection model with their count of marbles and
//  their favorite color. Their favorite color does not live
//  on the individual model with the member's name and marble
//  count, it is  loaded (eventually lazily) based off the 
//  member's id (to simplify, the models in this example all 
//  have ids that match the id in their urn)

// This twiddle is meant to illustrate two problems that are 
//  trying to be solved:
//
//   1. Displaying data from two collections together
//       (this is naively attempted in a computed on the `my-route`
//       controller)
//   2. When/how to lazy load the secondary data that only needs
//       to be loaded when actually displayed in the template (This
//       part is not addressed in the twiddle yet, the only place 
//       that seems appropriate is potentially the actions, but those
//       don't contain the logic for which items are actually about
//       to be displayed)

export default Route.extend({
    model() {
      const secondaryCollection = []
      return this.store.findRecord('primary-collection', 1);
  },
  
  actions: {
    // Example actions for changing the list displayed on the screen,
    //  meant to mimic the sorting and paginiation that a list could
    //  have, in our use case we may need to also load the secondary 
    //  data for the points that are about to be shown here?
    next() {
      const currentIndex = get(this, 'controller.index');
 
      set(this, 'controller.index', currentIndex < 4 ? currentIndex + 2 : 0);
    },
    
    random() {
      const randomFirst = Math.floor((Math.random() * 5));
    
      set(this, 'controller.index', randomFirst);
    }
  },

  
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.my-route.hbs

<div> 
	<ul>
  {{#each itemsShowing as |item|}}
		<li> {{item.name}} has {{item.count}} marbles and their favorite color is: {{item.extra.favoriteColor}} </li>
	{{/each}}
  </ul>
  
  <button {{action "next"}}> 
  	Next
  </button>
  
  <button {{action "random"}}> 
  	Random
  </button>
</div>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}