Polarity Sample Application

components.user-portrait.js

import Ember from 'ember';
import Component from '@ember/component';

export default Component.extend({
  numberOfSaves: 0,
  message: '',
  
  helloMessage: Ember.computed('username', function() {
  	return `Hello, ${this.get('username')}. Welcome!`;
  }),

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

controllers.application.js

import Controller from '@ember/controller';
import { later } from '@ember/runloop';

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

helpers.eq.js

import Ember from 'ember';

export function equal(params/*, hash*/) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(equal);

routes.application.js

import Ember from 'ember';
import { later } from '@ember/runloop';

export default Ember.Route.extend({
 model() {
   return new Promise((resolve) => {
     return later(this, function() {
       resolve("Polarity!");
     }, 2000);
   });
 }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.user-portrait-card {
  background-color: #ccc;
  padding: 20px;
}

.button-container{
 margin-top: 10px 
}

.warning{
 	background-color: red;
  color: white;
}

templates.application.hbs

<h1>Welcome to {{model}}</h1>

Username: <input type="text" value={{username}} oninput={{action (mut username) value="target.value"}}><br><br>

<button {{action "test"}}>Test</button><br><br>

{{user-portrait
  	username=username
  	save=(action "save")}}

templates.components.user-portrait.hbs

<div class="user-portrait-card">
  Username: {{username}}<br><br>
  
  {{helloMessage}}<br><br>

  (Number of Saves: {{numberOfSaves}})<br><br>
  {{#if (eq numberOfSaves 0)}}
    <div class="warning">
       <span>Please save before exiting</span>
    </div>
  {{/if}}
  <div class="button-container">
  	<button {{action "saveUser"}}>Save User</button>
  	<button {{action "clear"}}>Clear</button><br><br>
  </div>
  Message: {{message}}
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
  }
}