Next/Previous Observable 的导航

Question

我有一个博客 posts 的可观察对象，从数组转换而来：

let posts = Rx.Observable.fromArray(blogPosts)

next/previous 导航的按钮单击事件的两个可观察值 nextClicks 和 prevClicks 分别为：

我想要的是：

最初 posts observable 发出第一个 post 和然后等待点击事件
posts 在 nextClicks 发出时发出下一个 post （重复当前 post 如果没有下一个）
posts 在 prevClicks 发出时发出上一个 post （重复当前 post 如果没有可用的上一个）

我不确定这是否可行：

两个可观测值 postNextable 和 postPrevable，源自 posts，表示是否有next/prev post可用 posts分别

提前致谢！

Answer 1

有几种方法可以完成 1、2、3 和 4。对于第 4 项，我想知道您打算如何使用这些可观察量。

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

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

Next/Previous Observable 的导航

Next/Previous navigation of an Observable

javascript

reactive-programming

observable

rxjs