New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: '',
  lastName: '',
  fullName: Ember.computed('firstName', 'lastName', function() {
    const firstName = this.get('firstName');
    const lastName = this.get('lastName');
    
    if (firstName && lastName)  {
      return `${firstName} ${lastName}`;
    } else if (lastName) {
      return `Mx. ${lastName}`;
    } else {
      return firstName;
    }
  }),
  alertGreeting() {
    const fullName = this.get('fullName');
    const hasName = !Ember.isEmpty(fullName);

    alert(`Hello${hasName ? `, ${fullName}` : ''}!`);
  },
  actions: {
    formSubmitted(event) {
      event.preventDefault();
      this.alertGreeting();
    }
  }
});

styles.app.css

:root {
  --mdc-theme-primary: #0e4ead;
}

.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
  background-color: rgba(255, 255, 255, .2);
}

#greeting-form > button {
  margin-top: 8px;
}

templates.application.hbs

<main>
  <h1 class="mdc-typography--display1">Tell us about yourself!</h1>

  <form id="greeting-form" onsubmit={{action "formSubmitted"}}>
    {{mdc-textfield label="First Name" value=firstName onchange=(action (mut firstName))}}
    {{mdc-textfield label="Last Name" value=lastName onchange=(action (mut lastName))}}

    {{#mdc-button type="submit"}}
      Alert Greeting
    {{/mdc-button}}
  </form>

  <p class="mdc-typography--headline">{{fullName}}</p>
</main>

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-material-components-web": "*",
    "ember-data": "2.12.1"
  }
}