Access Properties of JS Object on Controller

Question

I have created an Ember.JS application where I hang some properties on the ApplicationController that need to be accessible form all over the app. One of these properties is queue (a JS object) broken down by server names (JS arrays). In my template I would like to list the items of each array but I'm not really sure how to do it. I read this question but I don't really understand the answer.

For my code I have:

App.ApplicationController = Ember.Controller.extend({
  currentUser: null,
  queuedPlayers: {
    "The Bastion": [],
    "Begeren Colony": [],
    "The Harbinger": [],
    "The Shadowlands": [],
    "Jung Ma": [],
    "The Ebon Hawk": [],
    "Prophecy of the Five": [],
    "Jedi Covenant": []
  }
});

The other controller:

App.IndexController = Ember.Controller.extend({
  needs: ['application'],
  currentUser: Ember.computed.alias('controllers.application.currentUser'),
  queuedPlayers: Ember.computed.alias('controllers.application.queuedPlayers'),
  ...

And in the template:

{{#each server in servers}}
  <h2>{{server}}</h2>
  {{#each player in queuedPlayers[server]}}
    {{player}}
  {{/each}}
{{/each}}

servers is an array of the servers (that matches the properties in queuedPlayers) I am passing to the template to use as the content attribute for a select list so the {{server}} tag renders fine. However the queuedPlayers[server] or queuedPlayers.get(server) is obviously not working because that's not how handlebars works but it's what I would like to achieve.

I am primarily a Python dev so JS is somewhat new to me so I'm not familiar with all it's nuances.

Answer 1

You'll need to create a component and pass in the necessary properties in order to accomplish this.

{{#each server in servers}}
  <h2>{{server}}</h2>
  {{queued-players collection=queuedPlayers selection=server}}
{{/each}}

Queued players template

{{#each player in players}}
  {{player}}
{{/each}}

Queued players js

players: function(){
  return this.get('collection')[this.get('selection')];
}.property('collection.[]', 'selection')