RxJS 观察一个对象 [英] RxJS observe an object

问题描述

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

I am new to RxJS so I apologize for the newbie question.

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

I have a local javascript object defined as:

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

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

I am binding each property to an input control where the user can change the values. I would like to be able to observe this object and capture the event when the value of any of the properties change.

这可以通过 RxJS 实现吗?

Is this achievable with RxJS?

谢谢.

推荐答案

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

Instead of using an object, you can store your entire state as Observable.

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

Here is the example code (something similar to what people do in 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>

这篇关于RxJS 观察一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！