Skip to content

Instantly share code, notes, and snippets.

@kyungw00k
Created November 13, 2018 15:51
Show Gist options
  • Save kyungw00k/3ffa78ae2f1b488b9c7a829c8bf1d021 to your computer and use it in GitHub Desktop.
Save kyungw00k/3ffa78ae2f1b488b9c7a829c8bf1d021 to your computer and use it in GitHub Desktop.
JS Bin RxJS 연습 // source https://jsbin.com/vudatux
<!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>
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