Last active
April 14, 2016 22:56
-
-
Save fhrbek/cc92af99c48f58713346b77cdc33ff18 to your computer and use it in GitHub Desktop.
DDAU Pattern - Hybrid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); | |
} | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}); | |
} | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
} | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}) | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode 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'; | |
}) | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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