Image changer

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<ul class="example-gravatar">
  <li>{{gravatar-image email="[email protected]" size="200"}}</li>
  <li>{{gravatar-image size="200"}}</li>
</ul>

gravatar-image.component.js

import Ember from 'ember';
const { Component, computed, get, set, run } = Ember;

export default Component.extend({
  size: 200,
  email: '',
  initialEmail: '',

  gravatarUrl: computed('email', 'size', function() {
    const email = get(this, 'email').toLowerCase(),
      size = get(this, 'size');

    return `http://www.gravatar.com/avatar/${email}?s=${size}`;
  }),
  actions: {
    updateEmail() {
      console.log('hit');
      run.debounce(() => {
        const newEmail = get(this, 'initialEmail');
        set(this, 'email', newEmail);
      }, 500); // or whatever time period you want
    }
  }
});

gravatar-image.template.hbs

<img src={{gravatarUrl}}>
<div class="email-input">
  {{input type="email" value=initialEmail placeholder="Enter your Gravatar e-mail" key-up="updateEmail"}}
</div>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}