Следующая / Предыдущая навигация по наблюдаемому

У меня есть наблюдаемые сообщения в блогах, преобразованные из массива:

let posts = Rx.Observable.fromArray(blogPosts)

И две наблюдаемые nextClicks и prevClicks событий нажатия кнопки для следующего / предыдущего перехода соответственно:

Я хочу:

  1. Первоначально наблюдаемый posts излучает самый первый пост, а затем ждет событий щелчка
  2. posts отправляет следующее сообщение, когда nextClicks отправляет (повторить текущее сообщение, если следующее недоступно)
  3. posts отправляет предыдущую публикацию, когда prevClicks отправляет (повторить текущую публикацию, если предыдущая публикация отсутствует)

И я не уверен, возможно ли это:

  1. Две наблюдаемые postNextable и postPrevable, полученные из posts, указывающие, есть ли следующая / предыдущая запись, доступная в posts соответственно

Заранее спасибо!


javascript observable reactive-programming rxjs
person KF Lin    schedule 27.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Есть несколько способов сделать 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 имеют очевидную семантику и их легко писать (например, различать коды клавиш или идентификаторы кнопок или другие события next и prev). пример кода

person user3743222    schedule 27.12.2015
comment
Спасибо за любезный ответ и образец кода. Этот код - то, что я искал! Кстати, для №4 я использую эти две наблюдаемые для отображения правильного стиля CSS (включение / выключение) каждой кнопки. - person KF Lin; 28.12.2015