Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Apr 2, 2019
Merged

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1bc9468
Converted link-to, input to angle bracket syntax
zachgarwood Mar 29, 2019
ba581fe
Made out-of-scope but reasonable edits
zachgarwood Mar 29, 2019
1bd1b2f
Clarified `@value` argument vs `value` property
zachgarwood Mar 29, 2019
4eca774
Made Input tag self-closing
zachgarwood Apr 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions guides/release/tutorial/autocomplete-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.

Expand Down Expand Up @@ -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.
Expand Down