New Twiddle

components.user-portrait.js

import Ember from 'ember';

export default Ember.Component.extend({
  numberOfSaves: 0,
  message: '',
	actions:{
    clear: function(){
      this.set('numberOfSaves', 0);
      this.set('message', '');
    },
    saveUser: function(){
      let self = this;
      
			this.incrementProperty('numberOfSaves');   		
      this.get('saveUser')().then(function(result){
        self.set('message', result);
      }, function(err){
      	self.set('message', 'Save Failed!');  
      });
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Polarity',
  username: "admin",
  actions: {
    test: function(){
      console.info("You pressed 'test'");
    },
    save: function(){
    	console.info("You pressed 'Save User'"); 
			return new Ember.RSVP.Promise(function(resolve, reject){
        resolve('Save Succeeded!');
      });
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<button {{action "test"}}>Test</button>
<br><br>
{{user-portrait username=username saveUser=(action "save")}}
<br>

templates.components.user-portrait.hbs

<div style="background-color: #ccc; padding: 20px;">
  UserName: {{username}} <br>(Number of Saves: {{numberOfSaves}})<br><br>
  <button {{action "saveUser"}}>Save User</button>
  <button {{action "clear"}}>Clear</button><br><br>
  Message: {{message}}
</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"
  }
}