web-dev-qa-db-ja.com

Rxjsによるオブジェクトの更新と変更の監視

私は現在、そのすべての要素を含む特定のオブジェクトへの変更を観察しようとしています。

次のコードは、object [x]が更新されたときにのみ起動しますが、object [x] [y]などのobject [x]の要素を個別に更新した場合には起動しません

<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>

このコードは実行され、正しく起動します。

しかしながら。代わりにこれに

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

その後、何も起こりません。

編集

これを表現するより良い方法は、オブジェクトの配列からの変化をどのように観察できるでしょうか？

javascriptrxjsfrp
12
Andrew Mata

Rx.Observable.ofNestedObjectChangesの簡単な実装の実際の例を以下に示します。その要点を取得して独自に実装できます。

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

        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";
0
Gorilla