Rearranged order of instructions in tutorial for actions (ember-learn#290)

* Rearranged order of instructions

Following the instructions at the end of the Building a Simple Component
page will temporarily leave the component in a non-functional state.
This change rearranges the order of instructions so that the reader has
a working application all the way through.

* Made suggested changes

* Moved changes to correct guide version

* Revert "Made suggested changes"

This reverts commit 9343d22c419763bdef89f79fcf848c320e200a4f.

* Revert "Rearranged order of instructions"

This reverts commit 99cfaefd6c59a0e65578eb8b93685efbba8a5918.

* Added changes to new guide version (3.6)

Author: zachgarwood

guides/v3.5.0/tutorial/simple-component.md

@@ -145,8 +145,26 @@ export default Component.extend({
 });
 ```
 
-To allow the user to widen the image, we will need to add an action that toggles the value of `isWide`.
-Let's call this action `toggleImageSize`
+To allow the user to widen the image, we will need to add an action that toggles
+the value of `isWide`. Let's create the `toggleImageSize` action to toggle the
+`isWide` property on our component:
+
+```javascript {data-filename="app/components/rental-listing.js" data-diff="-4,+5,+6,+7,+8,+9,+10"}
+import Component from '@ember/component';
+
+export default Component.extend({
+  isWide: false
+  isWide: false,
+  actions: {
+    toggleImageSize() {
+      this.toggleProperty('isWide');
+    }
+  }
+});
+```
+
+In order to trigger this action, we need to use the `{{action}}` helper in our
+template:
 
 ```handlebars {data-filename="app/templates/components/rental-listing.hbs" data-diff="-2,+3,+4,+4,+6,+7"}
 <article class="listing">
@@ -177,31 +195,14 @@ Let's call this action `toggleImageSize`
 </article>
 ```
 
-Clicking the anchor element will send the action to the component.
-Ember will then go into the `actions` hash and call the `toggleImageSize` function.
-
-An [actions hash](../../templates/actions/) is an object in the component that contains functions.
-These functions are called when the user interacts with the UI, such as clicking.
-
-Let's create the `toggleImageSize` function and toggle the `isWide` property on our component:
-
-```javascript {data-filename="app/components/rental-listing.js" data-diff="-4,+5,+6,+7,+8,+9,+10"}
-import Component from '@ember/component';
-
-export default Component.extend({
-  isWide: false
-  isWide: false,
-  actions: {
-    toggleImageSize() {
-      this.toggleProperty('isWide');
-    }
-  }
-});
-```
-
+So, when we click on the anchor element, Ember will go into the `actions` hash
+and call the `toggleImageSize` function. An
+[actions hash](../../templates/actions/) is an object in the component that
+contains functions. These functions are called when the user interacts with the
+UI, such as clicking.
 
-Now when we click the image or the `View Larger` link in our browser, we  see our image show larger.
-When we click the enlarged image again, we see it smaller.
+So, when we click the image or the `View Larger` link in our browser, we see our
+image shown larger. When we click the enlarged image we again see it smaller.
 
 ![rental listing with expand](/images/simple-component/styled-rental-listings.png)
 

guides/v3.6.0/tutorial/simple-component.md

@@ -145,8 +145,26 @@ export default Component.extend({
 });
 ```
 
-To allow the user to widen the image, we will need to add an action that toggles the value of `isWide`.
-Let's call this action `toggleImageSize`
+To allow the user to widen the image, we will need to add an action that toggles
+the value of `isWide`. Let's create the `toggleImageSize` action to toggle the
+`isWide` property on our component:
+
+```javascript {data-filename="app/components/rental-listing.js" data-diff="-4,+5,+6,+7,+8,+9,+10"}
+import Component from '@ember/component';
+
+export default Component.extend({
+  isWide: false
+  isWide: false,
+  actions: {
+    toggleImageSize() {
+      this.toggleProperty('isWide');
+    }
+  }
+});
+```
+
+In order to trigger this action, we need to use the `{{action}}` helper in our
+template:
 
 ```handlebars {data-filename="app/templates/components/rental-listing.hbs" data-diff="-2,+3,+4,+4,+6,+7"}
 <article class="listing">
@@ -177,31 +195,14 @@ Let's call this action `toggleImageSize`
 </article>
 ```
 
-Clicking the anchor element will send the action to the component.
-Ember will then go into the `actions` hash and call the `toggleImageSize` function.
-
-An [actions hash](../../templates/actions/) is an object in the component that contains functions.
-These functions are called when the user interacts with the UI, such as clicking.
-
-Let's create the `toggleImageSize` function and toggle the `isWide` property on our component:
-
-```javascript {data-filename="app/components/rental-listing.js" data-diff="-4,+5,+6,+7,+8,+9,+10"}
-import Component from '@ember/component';
-
-export default Component.extend({
-  isWide: false
-  isWide: false,
-  actions: {
-    toggleImageSize() {
-      this.toggleProperty('isWide');
-    }
-  }
-});
-```
-
+So, when we click on the anchor element, Ember will go into the `actions` hash
+and call the `toggleImageSize` function. An
+[actions hash](../../templates/actions/) is an object in the component that
+contains functions. These functions are called when the user interacts with the
+UI, such as clicking.
 
-Now when we click the image or the `View Larger` link in our browser, we  see our image show larger.
-When we click the enlarged image again, we see it smaller.
+So, when we click the image or the `View Larger` link in our browser, we see our
+image shown larger. When we click the enlarged image we again see it smaller.
 
 ![rental listing with expand](/images/simple-component/styled-rental-listings.png)