New Twiddle

components.my-component.js

import Ember from 'ember';

const {
  Component,
  get,
  assert,
  isPresent,
  isEmpty
} = Ember;

const REQ_ATTRS = [
  'firstName'
];

// This could be a utility function or something everyone else Tweets praise for
const verifyAttrs = function(attrs) {
  const componentName = get(this, '_debugContainerKey');

  attrs.forEach((attr) => {
    const oldAttr = get(this, `_${attr}`);
    const newAttr = get(this, attr);
    
    if (oldAttr !== newAttr) {
      assert(`"${attr}" is a required attribute in "${componentName}"`, isPresent(newAttr));
    }
  });
};

export default Component.extend({
  firstName: null,
  lastName: null,
  
  didReceiveAttrs() {
    this._super(...arguments);
    verifyAttrs.call(this, REQ_ATTRS);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Bam'
});

templates.application.hbs

<h1>Nu Validation Order</h1>
{{my-component firstName=firstName}}

<label>
	First Name:
  {{input value=firstName}}
</label>

templates.components.my-component.hbs

<ul>
	<li>First Name: {{firstName}}</li>
  <li>Last Name: {{lastName}}</li>
</ul>

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"
  }
}