When building complex components, the traditional way of passing and calling actions was cumbersome. Often while building and constructing components, it is preferable to build them in a composable manner and keep each composable part completely isolated and only concerned about itself. However the traditional approach to calling actions made this difficult, rather the parent component always needed to know about the child components actions. For example, suppose I have three components, all related to building a table (my-table, my-table-header-row, my-table-header-cell). Anytime I click on the "my-table-header-cell", the "cellClicked" action should be called and passed the key for that cell. The traditional approach would look something like this:
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.Component.extend({ | |
| defaultValues: function() { | |
| return { | |
| chartTitle: 'Liam Chart', | |
| chartSubtitle: 'WorldClimate', | |
| defaultValue: 0, | |
| funcAmt: function() { |
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.Route.extend({ | |
| model: function() { | |
| return {name: 'sam'}; | |
| } | |
| }); |
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.Controller.extend({ | |
| appName:'Ember Twiddle' | |
| }); |
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.Controller.extend({ | |
| actions: { | |
| import: function(item) { | |
| console.log('Making API call', item); | |
| item.set('isProcessing', true); | |
| } | |
| } | |
| }); |
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
| let subsets = 'abcd'; | |
| printSubsets(subsets); | |
| function printSubsets(subsets, prefix='') { | |
| let subsetLength = subsets.length; | |
| if (prefix.length > 0) { | |
| console.log(prefix); | |
| } |
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.Component.extend({ | |
| tagName: 'li' | |
| }); |
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
| function flattenObject(objToFlatten) { | |
| let result = {}; | |
| let objectsToFlatten = [objToFlatten]; | |
| while (objectsToFlatten.length) { | |
| let currentObject = objectsToFlatten.pop(); | |
| let currentKeys = Object.keys(currentObject); | |
| for (let i=0; i<currentKeys.length; i++) { | |
| let currentKey = currentKeys[i]; |
As a general pattern, it has been well established that access to any given database should be limited to a single service. Meaning that no two services should both be able to directly reach into the database to read, insert, update or delete the data. Instead, a single service should hove ownership of that database and if another service has need to access that same data, it must go through the owning service.
<diagram 1>