Merge pull request ember-learn#702 from zachgarwood/angle-bracket-ize--tutorial--autocomplete-component

Angle-bracket-ize tutorial/autocomplete-component.md

Author: locks

guides/release/tutorial/autocomplete-component.md

@@ -31,15 +31,12 @@ In this case we are passing, or "yielding", our filter data to the inner markup
   <p>
     We hope you find exactly what you're looking for in a place to stay.
   </p>
-  {{#link-to "about" class="button"}}
+  <LinkTo @route="about" class="button">
     About Us
-  {{/link-to}}
+  </LinkTo>
 </div>
 
-<ListFilter
- @filter={{action "filterByCity"}}
-as |filteredResults|
->
+<ListFilter @filter={{action "filterByCity"}} as |filteredResults|>
   <ul class="results">
     {{#each filteredResults as |rentalUnit|}}
       <li><RentalListing @rental={{rentalUnit}} /></li>
@@ -57,21 +54,25 @@ as |filteredResults|
 We want the component to simply provide an input field and yield the results list to its block, so our template will be simple:
 
 ```handlebars {data-filename=app/templates/components/list-filter.hbs}
-{{input
-  value=this.value
-  key-up=(action "handleFilterEntry")
+<Input
+  @value=this.value
+  @key-up=(action "handleFilterEntry")
   class="light"
   placeholder="Filter By City"
-}}
+/>
 {{yield this.results}}
 ```
 
-The template contains an [`{{input}}`](../../templates/input-helpers/) helper that renders as a text field, in which the user can type a pattern to filter the list of cities used in a search.
-The `value` property of the `input` will be kept in sync with the `value` property in the component.
+The template contains an [`<Input />`](../../templates/input-helpers/) helper
+that renders as a text field, in which the user can type a pattern to filter the
+list of cities used in a search. The `@value` argument of the `<Input />` will
+be kept in sync with the `value` property in the component.
 
-Another way to say this is that the `value` property of `input` is [**bound**](../../object-model/bindings/) to the `value` property of the component.
-If the property changes, either by the user typing in the input field, or by assigning a new value to it in our program,
-the new value of the property is present in both the rendered web page and in the code.
+Another way to say this is that the `@value` argument of `<Input />` is
+[**bound**](../../object-model/bindings/) to the `value` property of the
+component. If the property changes, either by the user typing in the input
+field, or by assigning a new value to it in our program, the new value of the
+property is present in both the rendered web page and in the code.
 
 The `key-up` property will be bound to the `handleFilterEntry` action.
 
@@ -102,7 +103,7 @@ export default class ListFilterComponent extends Component {
 
 #### Filtering Data Based on Input
 
-In the above example we use the `init` hook to seed our initial listings by calling the `filter` action with an empty value.
+In the above example we use the `constructor` to seed our initial listings by calling the `filter` action with an empty value.
 Our `handleFilterEntry` action calls a function called `filter` based on the `value` attribute set by the input helper.
 
 The `filter` function is passed in by the calling object. This is a pattern known as closure actions.