Skip to content

Instantly share code, notes, and snippets.

@fhrbek
Last active April 14, 2016 22:56
Show Gist options
  • Save fhrbek/cc92af99c48f58713346b77cdc33ff18 to your computer and use it in GitHub Desktop.
Save fhrbek/cc92af99c48f58713346b77cdc33ff18 to your computer and use it in GitHub Desktop.
DDAU Pattern - Hybrid
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',
person: presets[0],
updateObject: function (obj, diff) {
var properties = Object.keys(diff);
properties.forEach((property) => {
var value = diff[property],
orig = obj.get(property);
if (orig instanceof Ember.Object) {
this.updateObject(orig, value)
} else {
obj.set(property, value);
}
});
},
actions: {
preset (index) {
var preset = presets[index];
// Create a copy so that the presets are never modified - they are not immutable!
this.set('person', Person.create({
firstName: Name.create(preset.firstName),
lastName: Name.create(preset.lastName)
}));
},
onPersonChange (diff) {
// up to this point, the Person object was not modified, the diff has just bubbled up
// to the top level; now let's apply the diff on the object:
this.updateObject(this.get('person'), diff);
// in this demo, all we do is that we send the updated object to the log;
// we need to keep in mind that the object itself is mutable, so it only
// makes sense to inspect it right after the modification
console.log('PERSON CHANGED TO', this.get('person'));
}
}
});
import Ember from 'ember';
import Person from '../ddau-objects/person';
export default Ember.Component.extend({
person: Ember.computed.alias('value'),
classNameBindings: ['person.isValid::error'],
syncUp: function (diff) {
this.sendAction('changedAction', diff);
},
actions: {
firstNameChanged (diff) {
this.syncUp({'firstName': diff});
},
lastNameChanged (diff) {
this.syncUp({'lastName': diff});
}
}
});
{{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>
import Ember from 'ember';
import Name from '../ddau-objects/name';
export default Ember.Component.extend({
label: '',
item: Ember.computed.alias('value'),
classNameBindings: ['error:error'],
error: Ember.computed.alias('item.errorMessage'),
actions: {
onChange: function (value) {
this.sendAction('changedAction', {
'value': value
});
}
}
});
<label>{{label}}</label><input value={{item.value}} oninput={{action "onChange" value="target.value"}}>
{{#if error}}<span class="error-message">{{error}}</span>{{/if}}
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');
})
});
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';
})
});
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;
}
<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=person changedAction="onPersonChange"}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment