Iterate over a list, use index to fetch item from another list, pass in to nested component

2

I was lucky to get a thorough analysis of this problem from @rwjblue over on the Slack room. He pointed me to a Twiddle demonstrating the use of a helper to access interpolated indices on an array.

For posterity, here are failing test cases demonstrating the inability of the built-in get helper to access interpolated indices of an array, or indeed number-like keys from an object.

Handlebars’ minimal built-in helpers (and Ember’s minimal extensions) indicate a philosophy whereby view logic should be kept to a minimum, but I’d argue that having to integrate extra code into your codebase to do something as simple as this is adding far too much complexity.

Shouldn’t this be built in to get by default? Doesn’t this qualify as a bug?

import Ember from 'ember';

export function getAtIndex(params/*, hash*/) {
  return params;
}

export default Ember.Helper.extend({
  recomputeOnArrayChange: Ember.observer('_array.[]', function() {
    this.recompute();
  }),

  compute([array, index]) {
    this.set('_array', array);

    return array.objectAt(index);
  }
});