RxJS beobachten ein Objekt

Question

Ich bin neu bei RxJS, also entschuldige ich mich für die Newbie Frage.

Ich habe ein lokales Javascript-Objekt wie folgt definiert:

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

ich jede Eigenschaft mit einem Eingangssteuer bin verbindlich, wenn der Benutzer die Werte ändern kann. Ich möchte in der Lage sein, dieses Objekt zu beobachten und das Ereignis zu erfassen, wenn sich der Wert einer der Eigenschaften ändert.

Ist das mit RxJS erreichbar?

Danke.

Answer 1

Anstatt ein Objekt zu verwenden, können Sie Ihren gesamten Status als Observable speichern. Hier

ist das Beispiel-Code (etwas ähnlich zu dem, was die Menschen in redux tun):

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>