javascript - Observable 的下一个/上一个导航

Question

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

let posts = Rx.Observable.fromArray(blogPosts)

以及分别用于下一个/上一个导航的按钮单击事件的两个可观察值 nextClicks 和 prevClicks:

我想要的是:

1. 最初，posts 可观察对象发出第一个帖子，并且然后等待点击事件
2. posts 在 nextClicks 发出时发出下一个帖子(重复当前帖子如果没有下一个可用)
当 prevClicks 发出时，
3. posts 发出上一篇帖子(重复当前帖子如果没有上一个可用)

我不确定这是否可能:

两个可观察量 postNextable 和 postPrevable，派生自posts，指示是否有下一篇/上一篇文章分别帖子

提前致谢!

Answer 1

有几种方法可以实现 1、2、3 和 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