Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(25)

Side by Side Diff: src/site/samples/searchable_list/index.markdown

Issue 1387723002: Updating the samples page to reflect the examples that have been retired. (Closed) Base URL: https://github.com/dart-lang/www.dartlang.org.git@master
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 ---
2 layout: default
3 title: Searchable List
4 live_example_url: example/index.html
5
6 header:
7 css: ["/samples/samples.css"]
8 ---
9
10 ## {{ page.title }}
11
12 This simple application shows the use of a custom element where list data is
13 searchable. The demonstrates the following parts of Polymer:
14
15 * defining custom elements
16 * the `<template>` tag
17 * HTML imports
18 * data binding
19
20
21 The `<searchable-list>` element uses data binding to implement search.
22 See the `searchable_list.html` and the `searchable_list.dart` files for the
23 code.
24
25 The `SearchableList` class uses three variables in the search implementation:
26
27 * `data` stores all the data in the list
28 * `searchParam` stores the search parameter
29 * `results` stores the elements of `data` that match the search paramater
30
31 When the user types in the search input, the `search()` method triggers, and
32 the value of `results` is updated. Since `results` is an observable variable,
33 its representation in the UI automatically updates as its contents change.
34
35 Here is the minimal code for required to implement search
36 (`searchable_list.dart`):
37
38 search() {
39 results.clear();
40 String lower = searchParam.toLowerCase();
41 results.addAll(data.where((d) => d.toLowerCase().contains(lower)));
42 }
43
44 Any changes to `searchParam` trigger `search()`. Here is the code for that
45 (the `enteredView()` method in `searchable_list.dart`):
46
47 onPropertyChange(this, #searchParam, search);
48
49 Read the
50 [source](https://github.com/dart-lang/sample-searchable-list).
51
52 <iframe class="running-app-frame"
53 style="height:500px;width:100%;"
54 src="{{page.live_example_url}}">
55 </iframe>
56
57 See all [samples](/samples/)
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698