RxJS 观察一个对象

Question

我是 RxJS 的新手，所以我为新手问题道歉。

我有一个本地 javascript 对象定义为:

model.user = {
  firstName: 'John',
  lastName: 'Smith'
}

我将每个属性绑定(bind)到一个输入控件，用户可以在其中更改值。我希望能够观察这个对象并在任何属性的值发生变化时捕获事件。

这可以通过 RxJS 实现吗？

谢谢。

Answer 1

您可以将整个状态存储为 Observable，而不是使用对象。

这是示例代码(类似于人们在 redux 中所做的事情):

var fnameInput = document.getElementById('fname');
var lnameInput = document.getElementById('lname');
var jsonPre = document.getElementById('json');

var onFirstName$ = Rx.Observable.fromEvent(fnameInput, 'input');
var onLastName$ = Rx.Observable.fromEvent(lnameInput, 'input');

var initialState = {
  firstName: '', 
  lastName: '',
};

var state$ = Rx.Observable
  .merge(
    onFirstName$
      .map(e => 
        state => Object.assign(
          state, 
          { firstName: e.target.value }
        )
      ),
    onLastName$
      .map(e => 
        state => Object.assign(
          state, 
          { lastName: e.target.value }
        )
      )
  )
  .scan(
    (state, makeNew) => makeNew(state), 
    initialState
  )
  .startWith(initialState);

state$
  .subscribe(state => {
    jsonPre.innerHTML = JSON.stringify(state, null, 2);
  });

<input id="fname" type="text">
<input id="lname" type="text">
<pre id="json"></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>