Rxjs Beobachtung Objekt-updates und änderungen

Ich versuche zurzeit, zu beobachten, alle änderungen zu einem Objekt inklusive aller Elemente.

Dem folgenden code wird nur ausgelöst, wenn ein Objekt[x] updates, aber nicht, wenn Sie individuell Aktualisierung object[x]'s-Elemente wie Objekt[x][y]

<script>
  var elem = document.getElementById("test1");

var log = function(x) {
    elem.innerHTML += x + "<br/><br/><br/>";
};

var a = [{a:1,b:2},
         {a:2,b:5}
       ];


var source = Rx.Observable
.ofObjectChanges(a)
.map(function(x) {
    return JSON.stringify(x);
});


var subscription = source.subscribe(
    function (x) {log(x);},
    function (err) {log(err);},
    function () {log('Completed');}
);

a[0] = a[1];
</script>

Dieser code ausgeführt, und feuert richtig.

jedoch. wenn ich statt dieser 

a[0]['a'] = 3;

Dann passiert nichts.

BEARBEITEN

Einen besseren Weg zu formulieren, wie kann ich das beobachten der änderungen aus einem array von Objekten?

  • Wahrscheinlich fangen Sie mit dem verwenden ofArrayChanges statt.
InformationsquelleAutor Andrew Mata | 2015-09-20
  1. 5

    Wenn Sie wollen nur das verschachtelte Objekt änderungen:

    var source = rx.Observable.from(a).flatMap(function(item) {
  return rx.Observable.ofObjectChanges(item);
});

    Wenn Sie wollen auch änderungen wie a[0] = a[1]:

    var source = rx.Observable.merge(
  rx.Observable.ofArrayChanges(a),
  rx.Observable.from(a).flatMap(function(item) {
    return rx.Observable.ofObjectChanges(item);
  })
);

    Den flatMap oder selectMany (Sie haben die gleiche Funktion) wird Ihnen ermöglichen, Durchlaufen Sie einen Wert ein, und führen Sie eine Funktion zurückgibt, die ein zu Beobachten ist. Die Werte aller dieser Observablen sind "abgeflacht" auf einen neuen stream, der zurückgegeben wird.

    http://reactivex.io/documentation/operators/flatmap.html

    • damit es funktioniert, ich musste mich ändern rx in Rx und fügen Sie die map-Funktion am Ende der Zusammenführung. Cool!
    • 'rx.Beobachtbar ist.ofObjectChanges' depriciated.
    • Yep, sehen diese Methode als gefährlich, ich würde wirklich gerne sehen, wie zu beobachten-Objekt änderungen in RxJS 5...
    InformationsquelleAutor electrichead
  2. 1

    Vielleicht so etwas wie dies durch die Zusammenlegung von zwei Observablen (eine für das array und die andere beobachten, die Elemente des Arrays):

    var a = [
  {a:1,b:2},
  {a:2,b:5}
];


var source1 = Rx.Observable.ofArrayChanges(a).map(function(x) {
  return JSON.stringify(x);
});

var source2 = Rx.Observable
.fromArray(a.map(function(o, i) { return [o, i]; }))
.flatMap(function(oi) {
  return Rx.Observable.ofObjectChanges(oi[0])
  .map(function(x) {
    var y = {
      type: x.type,
      object: x.object,
      name: x.name,
      oldValue: x.oldValue,
      arrayIndex: oi[1] //pass the index of the member that changed
    };
    return JSON.stringify(y);
  });
})

source = source1.merge(source2)

var subscription = source.subscribe(
  function (x) {log(x);},
  function (err) {log(err);},
  function () {log('Completed');}
);


a[0] = a[1]
a[1]['b'] = 7

    Dank @electrichead hier sind wir nicht mit concatMap weil die Quellen, die wir durch ofObjectChanges und ofArrayChanges nie abgeschlossen.

    InformationsquelleAutor homam
  3. 0

    Hier ist ein funktionierendes Beispiel von Rx.Beobachtbar ist.ofNestedObjectChanges einfache Implementierung können Sie das wesentliche von it und umzusetzen, die Sie besitzen.

    http://jsbin.com/wekote/edit?js,Konsole

            Rx.Observable.ofNestedObjectChanges = function(obj) {
            if (obj == null) { throw new TypeError('object must not be null or undefined.'); }
            if (typeof Object.observe !== 'function' && typeof Object.unobserve !== 'function') { throw new TypeError('Object.observe is not supported on your platform') }
            return new Rx.AnonymousObservable(function(observer) {
                function observerFn(changes) {
                    for(var i = 0, len = changes.length; i < len; i++) {
                        observer.onNext(changes[i]);
                    }
                }
                Object.observe(obj, observerFn);
                //Recursive observers hooks - same observerFn
                traverseObjectTree(obj, observerFn);

                function traverseObjectTree(element, observerFn){
                    for(var i=0;i<Object.keys(element).length;i++){
                        var myObj = element[Object.keys(element)[i]];
                        if(typeof myObj === "object"){
                            Object.observe(myObj, observerFn);
                            traverseObjectTree(myObj,observerFn);
                        }
                    }
                }

                return function () {
                    Object.unobserve(obj, observerFn);
                };
            });
        };



        //Test
        var json = {
            element : {
                name : "Yocto",
                job : {
                    title: "Designer"
                }
            },
            element1: {
                name : "Mokto"
            }
        };

        setTimeout(function(){
            json.element.job.title = "A Great Designer";
        },3000);


        var source = Rx.Observable.ofNestedObjectChanges(json);

        var subscription = source.subscribe(
            function (x) {
                console.log(x);
            },
            function (err) {
                console.log('Error: %s', err);
            },
            function () {
                console.log('Completed');
            });

        json.element.name = "Candy Joe";
    • Ausgecheckt in Safari & Chrom. Snippet angegebene link scheint kaputt zu sein.
    InformationsquelleAutor Gorilla
Schreibe einen Kommentar