Next / Previous Observable

Question

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

let posts = Rx.Observable.fromArray(blogPosts)

两个可观察的nextClicks和prevClicks按钮点击事件分别用于下一个/上一个导航：

我想要的是：

1. 最初posts观察者会发出第一个帖子和 然后等待点击事件
当posts发出时，
2. nextClicks会发出下一篇文章（重复当前帖子 如果没有下一个可用的话）
3. posts在prevClicks发出时发出上一篇文章（重复当前帖子 如果没有可用的话）

我不确定这是否可行：

1. 两个可观察的postNextable和postPrevable，源自。{ posts，表示是否有可用的下一个/上一篇文章 分别为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，或者用于{{1} }和next事件）。 sample code