each-in

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  emojis: {
    'thumbsup': { image: 'thumbsup.png', text: 'Thumbs up!' },
    'heart': { image: 'heart.png', text: 'Love it!' }
  },
  
  actions: {
    add() {
      Ember.set(this.get('emojis'), "hello", { image: 'heart.png', text: 'Love it!' });
    }
  }
});

templates.application.hbs

<p>
  <button {{action 'add'}}>add</button>
</p>

<strong>Each</strong>
<div>
{{#each emojis as |emoji|}}
  {{emoji}}<br>
{{else}}
  Nothing to render
{{/each}}
</div>

<br><br>

<strong>Each-in</strong>
<div>
{{#each-in emojis as |name props|}}
 {{name}}: {{props.text}}<br>
{{else}}
  Nothing to render
{{/each-in}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}