forked from machty/ember-concurrency
-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.hbs
58 lines (45 loc) · 1.62 KB
/
template.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<h3>Debounced Type-Ahead Search</h3>
<p>
This advanced example combines multiple ember-concurrency concepts
to build a basic type-ahead search field with the following features:
</p>
<ul>
<li>
Debouncing: the browser won't make network requests until the user has
stopped typing for more than 250ms. This is accomplished by combining the
<code>{{link-to '.restartable()' 'docs.task-concurrency'}}</code> task modifier
with a <code>yield timeout(250)</code> at the beginning of the task.
</li>
<li>
XHR cancelation: if the user starts typing while a prior XHR request
is underway, that XHR request will be canceled to save network resources
(this is accomplished via the {{link-to "try / finally cancelation pattern" 'docs.error-vs-cancelation'}}).
</li>
<li>
Use {{link-to 'Derived State' 'docs.derived-state'}} to display
both a loading spinner and the final search results without using
a single <code>.set()</code>.
</li>
</ul>
<h5>Live Example</h5>
<p>
(Please mind the GitHub API quota :)
</p>
<p>
{{! BEGIN-SNIPPET debounced-search-with-cancelation-template }}
<input type="text" oninput={{action (perform searchRepo) value="target.value"}}
placeholder="Search GitHub..." />
<div>Has Results:</div>
<div>{{hasResults}}</div>
<div>Results (bug - nothing will appear):</div>
<ul>
{{#each lastSuccessful as |repo|}}
<li>{{repo.full_name}}</li>
{{/each}}
</ul>
{{! END-SNIPPET }}
</p>
<h5>JavaScript</h5>
{{code-snippet name="debounced-search-with-cancelation.js"}}
<h5>Template</h5>
{{code-snippet name="debounced-search-with-cancelation-template.hbs"}}