DDAU with mut

components.first-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['first-component component']
});

components.fourth-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['fourth-component component']
});

components.second-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['second-component component']
});

components.third-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['third-component component']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {
		updateName(newName) {
  		Ember.set(this, 'appName', newName);
		}
	}
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
p {
  margin: 0.5rem 0;
}
.component {
  padding-top: 0.25rem;
}
.component .component-text {
  padding-left: 1rem;
}
.first-component strong,
.first-component span {
	color: red; 
}
.second-component strong,
.second-component span {
	color: purple;
}
.third-component strong,
.third-component span {
	color: blue; 
}
.fourth-component strong,
.fourth-component span {
	color: green; 
}

templates.application.hbs

<h1>Welcome to "{{appName}}"</h1>
<p>Following Data Down Actions Up (DDAU), you can either pass an action down from the controller to update a controller value or you can use the mut helper.</p>
<p>Using the <code>mut</code> helper in an action is equivalent to writing an action to set the property with the new value. This will DRY up your code by eliminating the extra steps of creating an action and passing it down with your mutable property.</p>
<p><strong>Enter a new <code>appName</code> value and hit enter.</strong></p>
<br>
{{first-component
	appName=appName
  updateName=(action 'updateName')
}}

templates.components.first-component.hbs

<p><strong>&#123;&#123; first-component</strong></p>
<div class="component-text">
  <p><span>appName="{{appName}}"</span></p>
  <p>Update <code>appName</code> with action: {{input enter=(action updateName)}}</p>
  <p>Update <code>appName</code> with mut: {{input enter=(action (mut appName))}}</p>
  {{second-component
    appName=appName
    updateName=(action updateName)
  }}
</div>
<p><strong>&#125;&#125;</strong></p>

templates.components.fourth-component.hbs

<p><strong>&#123;&#123; fourth-component</strong></p>
<div class="component-text">
  <p><span>appName="{{appName}}"</span></p>
  <p>Update <code>appName</code> with action: {{input enter=(action updateName)}}</p>
  <p>Update <code>appName</code> with mut: {{input enter=(action (mut appName))}}</p>
</div>
<p><strong>&#125;&#125;</strong></p>

templates.components.second-component.hbs

<p><strong>&#123;&#123; second-component</strong></p>
<div class="component-text">
  <p><span>appName="{{appName}}"</span></p>
  <p>Update <code>appName</code> with action: {{input enter=(action updateName)}}</p>
  <p>Update <code>appName</code> with mut: {{input enter=(action (mut appName))}}</p>
  {{third-component
    appName=appName
    updateName=(action updateName)
  }}
</div>
<p><strong>&#125;&#125;</strong></p>

templates.components.third-component.hbs

<p><strong>&#123;&#123; third-component</strong></p>
<div class="component-text">
  <p><span>appName="{{appName}}"</span></p>
  <p>Update <code>appName</code> with action: {{input enter=(action updateName)}}</p>
  <p>Update <code>appName</code> with mut: {{input enter=(action (mut appName))}}</p>
  {{fourth-component
    appName=appName
    updateName=(action updateName)
  }}
</div>
<p><strong>&#125;&#125;</strong></p>

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}