New Twiddle

components.some-fish.js

import Ember from 'ember'

export default Ember.Component.extend({
  one: null,
  two: null,
  red: null,
  blue: null
})

controllers.application.js

import Ember from 'ember'

export default Ember.Controller.extend({
  someHash: {
    one: 'One',
    two: 'Two',
    red: 'Red',
    blue: 'Blue'
  }
});

helpers.spread.js

import Ember from 'ember'
const {
  assert,
  defineProperty,
  get,
  isNone,
  typeOf
} = Ember
const {
  keys
} = Object

export function spread([source='options']) {
  assert(`Spread must be given a property name to act on - received ${source}`, typeOf(source) === 'string')

  return function() {
    const target = get(this, source)
    assert(`Failed to spread ${source} - the value of ${source} must be an object hash`, typeOf(target) === 'object')

    keys(target).forEach(key => {
      defineProperty(this, key, Ember.computed.readOnly(`${source}.${key}`))
    })
  }
}

export default Ember.Helper.helper(spread);

templates.application.hbs

<h3>Explicit</h3>
{{component 'some-fish'
  one='One'
  two='Two'
  red='Red'
  blue='Blue'
}}

<h3>Spread</h3>
{{component 'some-fish'
  options=(hash
    one='One'
    two='Two'
    red='Red'
    blue='Blue'
  )
  didInitAttrs=(spread)
}}

<h3>Spread with external hash</h3>
{{component 'some-fish'
  foo=someHash
  didInitAttrs=(spread 'foo')
}}

templates.components.some-fish.hbs

<div>{{one}} Fish</div>
<div>{{two}} Fish</div>
<div>{{red}} Fish</div>
<div>{{blue}} Fish</div>

twiddle.json

{
  "version": "0.10.6",
  "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.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}