我一直在尝试创建一些cycle.js示例作为嵌套对话框,并使用选择框在它们之间切换.
其中一个对话是官方Github HTTP搜索示例的克隆.
另一个对话是一个更基本的对话,没有HTTP,只有DOM.
我觉得我绕着2号换了我的头,但我对Rx来说相当新,所以可能做得不正确或天真.
在我向搜索页面添加加载指示器之前,这一切似乎都运行良好.
为此,我转过身来:
const vTree$ = responses.HTTP
.filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
.flatMapLatest(x => x)
.map(res => res.body.items)
.startWith([])
.map(results =>
h('div.wrapper', {}, [
h('label.label', {}, 'Search:'),
h('input.field', {type: 'text'}),
h('hr'),
h('section.search-results', {}, results.map(resultView)),
])
)
Run Code Online (Sandbox Code Playgroud)
进入:
const searchResponse$ = responses.HTTP
.filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
.flatMapLatest(x => x)
.map(res => res.body.items)
.startWith([])
const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))
// Convert the stream of HTTP responses to virtual DOM elements.
const vtree$ = loading$.withLatestFrom(searchResponse$, (loading, results) =>
h('div.wrapper', …Run Code Online (Sandbox Code Playgroud) cyclejs ×1