CODEWITHSUNDEEP
javascriptrxjsreactive-programmingrxjs5
softshipper
softshipper

Reputation: 34119

Activate observable again after unsubscribe

I have a toggle button and a calendar, that looks like enter image description here

As you can see on the image, the edit is a toggle button and when it got pressed, then the calendar will be editable.

The edit toggle button is defined as hot observable:

let oEditOb = this._createEditObservable(this.getById("cal-edit"));
_createEditObservable: function (oEditBtn) {
      return Rx.Observable.create(function (subscriber) {
        oEditBtn.attachPress(function (oEvent) {
          subscriber.next(oEvent);
        });
      });
    },

Also the select event on calendar:

let oCalendarSelectOb = this._createCalendarSelectObservable(this.getById("calendar-view"));

    _createCalendarSelectObservable: function (oCalendar) {
      return Rx.Observable.create(function (subscriber) {
        oCalendar.attachSelect(function (oEvent) {
          subscriber.next(oEvent);
        })
      });
    },

When the toggle button got pressed, then it will switch to calendar observable. To clarify consider following code snippet:

_processCalenderSelect: function (oCalendarSelectOb, oEditButtonOb) {
      let self = this;

      return oEditButtonOb
        .filter(function (oBtn) {
          return oBtn.getPressed();
        })
        .switchMapTo(oCalendarSelectOb)
        .mergeMap(function (oCalendar) {
          return Rx.Observable.from(oCalendar.getSource().getSelectedDates());
        })
        .map(function (oDateRange) {
          return oDateRange.getStartDate();
        });

    },

Once it switched to calendar observable, then the calendar will be editable forever, even when I press the toggle button to disable the edit mode.

I tried to unsubscribe the calendar select observable:

oEditPressedOb.subscribe(function (oSource) {
        if(!oSource.getPressed()){
          oSubscription.unsubscribe();
        }
        console.log(oSource);
      });

But then the calendar select will be not streamed anymore after enable the edit mode again.

Upvotes: 0

Views: 269

Answers (1)

Sergey Sokolov
Sergey Sokolov

Reputation: 2839

Try to use combineLatest:

_processCalenderSelect: function (oCalendarSelectOb, oEditButtonOb) {
  let self = this;

  let selectedDates = oCalendarSelectOb
    .mergeMap(function (oCalendar) {
      return Rx.Observable.from(oCalendar.getSource().getSelectedDates());
    })
    .map(function (oDateRange) {
      return oDateRange.getStartDate();
    });

  return Rx.Observable
    .combineLatest(
      oEditButtonOb.map(function (oBtn) {
        return oBtn.getPressed();
      }),
      selectedDates
    )
    .filter(function (input) {
      return input[0];
    })
    .map(function (input) {
      return input[1];
    });
},

Upvotes: 2

Related Questions