RxJS 观察一个对象

本文介绍了RxJS 观察一个对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是 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="cdnjs.cloudflare/ajax/libs/rxjs/4.0.6/rx.all.js"></script>