cleanup.js

cleanup.js

import Ember from 'ember';

const { computed, on } = Ember;

// Our Higher Order Function, as before
let has = field => computed.notEmpty(field);

// The Component UI fields as before. 
const UI_FIELDS = ['userName', 'password'];

// Pre-generate an object with the properties and computed
// properties that we need. 
var processedAttrs = {};
UI_FIELDS.forEach( (field) => {
  processedAttrs[field] = '';
  processedAttrs[`has${field.capitalize()}`] = has(field);
});

// Create a Component just as you normally would. 
let LoginComponent = Ember.Component.extend({
  // Your usual Ember component stuff in here as needed
  debugOutput: on('init', function(){
    console.log('hasPassword=', this.get('hasPassword'));
    console.log('hasUserName=', this.get('hasUserName'));
  })
});

// Export the component with an extra extension of our pre
// generated attributes and computed properties.
export default LoginComponent.extend(processedAttrs);