推荐使用或不使用主题

Question

我在我的代码中使用 Subject 并想知道是否建议以这种方式进行。

首先，对于我使用的主题，当切换按钮被按下时，其他按钮将被设置为非活动状态。

edit 被按下后：

主题定义和订阅者实现代码：

  let oButtonSubject = new Rx.Subject();
  this._subscribeButtonState(oButtonSubject);

_subscribeButtonState: function (oButtonSubject) {
      let self = this;
      return oButtonSubject
        .subscribe(function (oBtnState) {
          let oModel = self.getModel("vmButtonsState");
          oModel.setProperty("/edit", oBtnState.bEdit);
          oModel.setProperty("/mass", oBtnState.bMass);
          oModel.setProperty("/save", oBtnState.bSave);
          oModel.setProperty("/cancel", oBtnState.bCancel);
        });
    },

上面的代码将设置按钮的状态。

每次按下edit时，都会调用next方法并将数据推送到oButtonSubject。

_subscribeEditPressOb: function (oEditPressed, oButtonSubject) {
      let self = this;
      return oEditPressed
        .map(function (oSource) {
          return oSource;
        })
        .subscribe(function (oSource) {

            // Determine select state for the calendar.
            // The calendar is only allowed to select, if
            // EDIT button is clicked.
            if (oSource.getId().indexOf("cal-edit") >= 0 && oSource.getPressed()) {
              oButtonSubject.next({bEdit: true, bMass: false, bSave: false, bCancel: false});
            } else {
              oButtonSubject.next({bEdit: true, bMass: true, bSave: true, bCancel: true});
            }
          },
          function (err) {
            jQuery.sap.log.fatal(err);
          });
    },

上面的代码在按下edit按钮时订阅，在推送数据到主题之后。

主题的使用方法正确吗？

Answer 1

Subject 意味着从非反应性世界进入 Rx 世界的入口。在您的情况下，您正在使用 Subject 根据编辑按钮上的 单击事件 发出事件。

我建议您不要为此特定实现使用主题，而是使用fromEvent 直接将您的点击用作流

以下是一个示例（忽略粗糙的边缘；它在 DOM 中保持状态）(jsbin)

const editButton = document.getElementById('enable-edit-mode')
const saveChangesButton = document.getElementById('save-changes');
const cancelChangesButton = document.getElementById('cancel-save-changes');

const enableEditModeStream = Rx.Observable.fromEvent(editButton, 'click')
.do(() => {
  editButton.setAttribute('disabled','disabled')
  saveChangesButton.removeAttribute('disabled');
  cancelChangesButton.removeAttribute('disabled');
});

const saveChangesStream = Rx.Observable.fromEvent(saveChangesButton, 'click')
  .do(() => {
    console.log('saving changes')
  });
const cancelChangesStream = Rx.Observable.fromEvent(cancelChangesButton, 'click');

const saveCancelEditModeStream = Rx.Observable.merge(
  saveChangesStream,
  cancelChangesStream
)
.do(() => {
  editButton.removeAttribute('disabled');
  saveChangesButton.setAttribute('disabled','disabled')
  cancelChangesButton.setAttribute('disabled','disabled')
});


Rx.Observable.merge(
  enableEditModeStream,
  saveCancelEditModeStream
)
.subscribe();