Created
November 13, 2018 15:51
-
-
Save kyungw00k/3ffa78ae2f1b488b9c7a829c8bf1d021 to your computer and use it in GitHub Desktop.
JS Bin RxJS 연습 // source https://jsbin.com/vudatux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="RxJS 연습"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.js"></script> | |
| <input id="search" placeholder="검색어"></input> | |
| <ul id="suggestLayer"></ul> | |
| <script id="jsbin-javascript"> | |
| const { | |
| fromEvent, | |
| Observable | |
| } = rxjs | |
| const { | |
| ajax | |
| } = rxjs.ajax | |
| const { | |
| map, | |
| switchMap, | |
| debounceTime, | |
| filter, | |
| distinctUntilChanged, | |
| tap, | |
| retry, | |
| partition, | |
| finalize, | |
| share | |
| } = rxjs.operators | |
| const keyup$ = fromEvent(document.getElementById('search'), 'keyup') | |
| .pipe( | |
| debounceTime(300), | |
| map(e => e.target.value), | |
| distinctUntilChanged(), | |
| tap(v => console.log('from keyup$', v)), | |
| share() | |
| ) | |
| const $layer = document.getElementById('suggestLayer') | |
| let [user$, reset$] = keyup$.pipe( | |
| partition(q => q.trim().length > 0) | |
| ) | |
| function drawLayer(items) { | |
| $layer.innerHTML = items.map(u => { | |
| return '<li class="user"><img src="'+u.avatar_url+'" width="50px" height="50px"></li>' | |
| }) | |
| } | |
| user$ = user$.pipe( | |
| switchMap(q => ajax.getJSON('https://api.github.com/search/users?q=' + q)), | |
| retry(2), | |
| finalize(), | |
| tap(v => console.log('from user$', v)) | |
| ) | |
| user$.subscribe({ | |
| next: v => drawLayer(v.items), | |
| error: e => { | |
| console.error(e) | |
| alert(e.message) | |
| } | |
| }) | |
| reset$ | |
| .pipe( | |
| tap(v => $layer.innerHTML = ''), | |
| tap(v => console.log('from reset$', v)) | |
| ) | |
| .subscribe() | |
| // keyup$.connect() | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const { | |
| fromEvent, | |
| Observable | |
| } = rxjs | |
| const { | |
| ajax | |
| } = rxjs.ajax | |
| const { | |
| map, | |
| switchMap, | |
| debounceTime, | |
| filter, | |
| distinctUntilChanged, | |
| tap, | |
| retry, | |
| partition, | |
| finalize, | |
| share | |
| } = rxjs.operators | |
| const keyup$ = fromEvent(document.getElementById('search'), 'keyup') | |
| .pipe( | |
| debounceTime(300), | |
| map(e => e.target.value), | |
| distinctUntilChanged(), | |
| tap(v => console.log('from keyup$', v)), | |
| share() | |
| ) | |
| const $layer = document.getElementById('suggestLayer') | |
| let [user$, reset$] = keyup$.pipe( | |
| partition(q => q.trim().length > 0) | |
| ) | |
| function drawLayer(items) { | |
| $layer.innerHTML = items.map(u => { | |
| return '<li class="user"><img src="'+u.avatar_url+'" width="50px" height="50px"></li>' | |
| }) | |
| } | |
| user$ = user$.pipe( | |
| switchMap(q => ajax.getJSON('https://api.github.com/search/users?q=' + q)), | |
| retry(2), | |
| finalize(), | |
| tap(v => console.log('from user$', v)) | |
| ) | |
| user$.subscribe({ | |
| next: v => drawLayer(v.items), | |
| error: e => { | |
| console.error(e) | |
| alert(e.message) | |
| } | |
| }) | |
| reset$ | |
| .pipe( | |
| tap(v => $layer.innerHTML = ''), | |
| tap(v => console.log('from reset$', v)) | |
| ) | |
| .subscribe() | |
| // keyup$.connect()</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { | |
| fromEvent, | |
| Observable | |
| } = rxjs | |
| const { | |
| ajax | |
| } = rxjs.ajax | |
| const { | |
| map, | |
| switchMap, | |
| debounceTime, | |
| filter, | |
| distinctUntilChanged, | |
| tap, | |
| retry, | |
| partition, | |
| finalize, | |
| share | |
| } = rxjs.operators | |
| const keyup$ = fromEvent(document.getElementById('search'), 'keyup') | |
| .pipe( | |
| debounceTime(300), | |
| map(e => e.target.value), | |
| distinctUntilChanged(), | |
| tap(v => console.log('from keyup$', v)), | |
| share() | |
| ) | |
| const $layer = document.getElementById('suggestLayer') | |
| let [user$, reset$] = keyup$.pipe( | |
| partition(q => q.trim().length > 0) | |
| ) | |
| function drawLayer(items) { | |
| $layer.innerHTML = items.map(u => { | |
| return '<li class="user"><img src="'+u.avatar_url+'" width="50px" height="50px"></li>' | |
| }) | |
| } | |
| user$ = user$.pipe( | |
| switchMap(q => ajax.getJSON('https://api.github.com/search/users?q=' + q)), | |
| retry(2), | |
| finalize(), | |
| tap(v => console.log('from user$', v)) | |
| ) | |
| user$.subscribe({ | |
| next: v => drawLayer(v.items), | |
| error: e => { | |
| console.error(e) | |
| alert(e.message) | |
| } | |
| }) | |
| reset$ | |
| .pipe( | |
| tap(v => $layer.innerHTML = ''), | |
| tap(v => console.log('from reset$', v)) | |
| ) | |
| .subscribe() | |
| // keyup$.connect() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment