下一個/上一個可觀察對象的導航

Question

我有一個可觀察到的博客文章，是從數組轉換而成的：

let posts = Rx.Observable.fromArray(blogPosts)

下一個/上一個導航的按鈕單擊事件的兩個可觀察到的nextClicks和prevClicks ：

我想要的是：

1. 最初，可觀察的posts會發出第一條帖子，然后等待點擊事件
2. 當nextClicks發出時， nextClicks posts發出下一個帖子（如果沒有下一個可用，則重復當前帖子）
3. 當prevClicks發出時， posts發出prev post（如果沒有prev可用，則重復當前帖子）

我不確定這是否可能：

4. 兩個觀測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，或者區分您的next和prev事件）。 樣例代碼