Observable 的下一个/上一个导航答案

【问题标题】：Next/Previous navigation of an ObservableObservable 的下一个/上一个导航
【发布时间】：2015-12-27 04:07:38
【问题描述】：

我有一个可观察的博客文章，从数组转换而来：

let posts = Rx.Observable.fromArray(blogPosts)

还有两个 observables nextClicks 和 prevClicks 的按钮点击事件分别用于下一个/上一个导航：

我想要的是：

最初posts observable 会发出第一个帖子，然后然后等待点击事件
posts 在nextClicks 发出时发出下一个帖子（重复当前帖子如果没有下一个可用）
posts 在prevClicks 发出时发出上一篇文章（重复当前帖子如果没有上一个可用）

我不确定这是否可能：

两个 observables postNextable 和 postPrevable，源自 posts，表示是否有下一篇/上一篇文章在 posts分别

提前致谢！

【问题讨论】：

标签： javascript reactive-programming rxjs observable

【解决方案1】：

有几种方法可以实现 1、2、3 和 4。对于第 4 点，我想知道您打算如何使用这些 observables。

一种只使用纯函数而不使用主题的方法是：

var blogPosts$ = Rx.Observable.just(blogPosts);
var index$ = Rx.Observable.merge(nextClicks, prevClicks)
             .withLatestFrom(blogPosts$, function(ev, blogPosts){return {posts: blogPosts, ev : ev};})
             .scan(function(index, posts_and_ev){
                     return isNextClick(posts_and_ev.ev) && isNextable(posts_and_ev.posts, index) ? index + 1 
                           :isPrevClick(posts_and_ev.ev) && isPrevable(posts_and_ev.posts, index) ? index - 1
                           :index
                   }, 0);
var currentPost$ = index$.withLatestFrom(blogPosts$, function (index, blogPost){return blogPost[index]; }).startWith(blogPosts[0]);
var postNextable = index$.withLatestFrom(blogPosts$, function (index, blogPost){return isNextable(blogPost, index);});
var postPrevable = index$.withLatestFrom(blogPosts$, function (index, blogPost){return isNextable(blogPost, index);})

您寻求的输出在此处命名为currentPost$。

此后包括代码测试。 isNextable、isNextClick、isPrevable、isPrevClick 具有明显的语义，并且易于编写（例如区分键代码或按钮 ID 或其他 next 和 prev 事件）。 sample code

【讨论】：

感谢您的友好回答和示例代码。这些代码就是我要找的！顺便说一句，对于 #4，我使用这两个 observable 来显示每个按钮的正确 CSS 样式（启用/禁用）。