DDAU Pattern - Immutable

controllers.application.js

import Ember from 'ember';
import Person from '../ddau-objects/person';
import Name from '../ddau-objects/name';

const presets = [
  Person.create({
    firstName: Name.create({value: 'John'}),
    lastName: Name.create({value: 'Doe'})
  }),
  Person.create({
    firstName: Name.create({value: '<your first name>'}),
    lastName: Name.create({value: '<your last name>'})
  }),
  Person.create({
    firstName: Name.create({value: 'John'}),
    lastName: Name.create({value: '<your last name>'})
  }),
  Person.create({
    firstName: Name.create({value: ''}),
    lastName: Name.create({value: ''})
  })
];

export default Ember.Controller.extend({
  appName: 'DDAU sandbox',
  
  personPreset: presets[3],

  actions: {
    preset (index) {
      this.set('personPreset', presets[index]);
    },
    
    onPersonChange (person) {
      console.log('PERSON CHANGED TO', person);
    }
  }
});

ddau-form.component.js

import Ember from 'ember';
import Person from '../ddau-objects/person';

export default Ember.Component.extend({

  person: Ember.computed('value', function () {
    return Person.create(this.get('value'));
  }),

  classNameBindings: ['person.isValid::error'],

  syncUp: function (props) {
    this.setProperties(props);
    this.sendAction('changedAction', Person.create(this.get('person')));
  },

  actions: {
    firstNameChanged (name) {
      this.syncUp({'person.firstName': name});
    },

    lastNameChanged (name) {
      this.syncUp({'person.lastName': name});
    }
  }
});

ddau-form.template.hbs

{{ddau-item label="First name" value=person.firstName changedAction="firstNameChanged"}}
{{ddau-item label="Last name" value=person.lastName changedAction="lastNameChanged"}}
<div class="validation-message">{{person.validationMessage}}</div>

ddau-item.component.js

import Ember from 'ember';
import Name from '../ddau-objects/name';

export default Ember.Component.extend({
  label: '',
  item: Ember.computed('value', function () {
    return Name.create(this.get('value'));
  }),

  classNameBindings: ['error:error'],

  error: Ember.computed.alias('item.errorMessage'),

  actions: {
    onChange: function (value) {
      this.set('item.value', value);
      this.sendAction('changedAction', Name.create(this.get('item')));
    }
  }
});

ddau-item.template.hbs

<label>{{label}}</label><input value={{item.value}} oninput={{action "onChange" value="target.value"}}>
{{#if error}}<span class="error-message">{{error}}</span>{{/if}}

ddau-objects.name.js

import Ember from 'ember';

export default Ember.Object.extend({

  value: '',

  isValid: Ember.computed('errorMessage', function () {
    return this.get('errorMessage') === null;
  }),

  errorMessage: Ember.computed('value', function () {
    let value = this.get('value');
    return Ember.isBlank(value)
      ? 'Value must not be blank'
      : (/^[a-z]+$/i.test(value)
        ? null
        : 'Value must contain only ASCII characters');
  })

});

ddau-objects.person.js

import Ember from 'ember';
import Name from './name';

export default Ember.Object.extend({

  firstName: Name.create(),
  lastName: Name.create(),

  fullName: Ember.computed('firstName.value', 'lastName.value', function () {
    return this.get('firstName.value') + ' ' + this.get('lastName.value');
  }),

  isValid: Ember.computed('firstName.isValid', 'lastName.isValid', function () {
    return this.get('firstName.isValid') && this.get('lastName.isValid');
  }),

  validationMessage: Ember.computed('isValid', 'fullName', function () {
    return this.get('isValid')
      ? 'The person info is valid and your full name is ' + this.get('fullName')
      : 'There are errors - check all properties';
  })

});

styles.app.css

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

div {
  padding: 0.5em;
}

label {
  margin-right: 0.5em;
}

div.error {
  background-color: #faa;
}

.error-message {
  margin-left: 0.5em;
  color: #f00;
}

.validation-message {
  font-style: italic;
}

templates.application.hbs

<h1>{{appName}}</h1>
<div class="presets">
  <button {{action "preset" 0}}>PRESET 1</button>
  <button {{action "preset" 1}}>PRESET 2</button>
  <button {{action "preset" 2}}>PRESET 3</button>
  <button {{action "preset" 3}}>PRESET 4</button>
</div>
{{ddau-form value=personPreset changedAction="onPersonChange"}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}