Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26537 > unrolled thread

Object.observe and Array

Back to article view | Back to comp.lang.javascript

Contents

  Object.observe and Array Une Bévue <unbewusst.sein@fai.invalid> - 2015-01-11 11:15 +0100
    Re: Object.observe and Array Une Bévue <unbewusst.sein@fai.invalid> - 2015-01-11 16:53 +0100
      Resolved : Object.observe and Array Une Bévue <unbewusst.sein@fai.invalid> - 2015-01-13 09:54 +0100

#26537 — Object.observe and Array

say, I've an Object :

var org_ytho_controller = Object.create(null);
with the 'categories' attribute :
org_ytho_controller.categories = 'Android BIOS CSS'.split(' ');

and I observe this Object by:
         var org_ytho_controllerChanges = function(changes) {
             document.getElementById('log').innerHTML += "changes.length 
= " + changes.length + "" + "\n";
             changes.forEach(function(change) {
                 var txt = "change.type = '" + change.type + "', ";
                 txt += "change.name = '" + change.name + "', ";
                 txt += "change.oldValue = '" + change.oldValue + "'";
                 document.getElementById('log').innerHTML += txt + "\n";
             });
             console.log("changes:");
             console.dir(changes);
         }
Object.observe(org_ytho_controller, org_ytho_controllerChanges);

(Notice the element with id "log" is a pre one.)

when the changes are done like that :

org_ytho_controller.categories[org_ytho_controller.categories.length] = 
'Another Category';

org_ytho_controllerChanges(changes) report nothing.

then i thought, this is because org_ytho_controller.categories is still 
an Array, the no change.

However changing like that :

var a = org_ytho_controller.categories;
org_ytho_controller.categories = null;
a[a.length] = 'Another Category';
org_ytho_controller.categories = a;

Then, org_ytho_controllerChanges(changes) report 2 changes :
change.type = 'update', change.name = 'categories', change.oldValue = 
'Android BIOS CSS Another Category'
change.type = 'update', change.name = 'categories', change.oldValue = 'null'

the NEW value 'Android BIOS CSS Another Category' coming as an oldValue ???

may be the sole workaround could be to add a length property :

org_ytho_controller.categoriesLength = 
org_ytho_controller.categories.length;
and update it each time org_ytho_controller.categories is updated :
org_ytho_controller.categories[org_ytho_controller.categories.length] = 
'Another Category';
org_ytho_controller.categoriesLength = 
org_ytho_controller.categories.length;

BUT the Array could be changed without affecting the number of 
categories, for example:
org_ytho_controller.categories[1] = 'SBIOS'; // BIOS -o-> SBIOS
org_ytho_controller.categoriesLength = 
org_ytho_controller.categories.length; // no change here...

[toc] | [next] | [standalone]

#26546

Le 11/01/15 11:15, Une Bévue a écrit :
> when the changes are done like that :
>
> org_ytho_controller.categories[org_ytho_controller.categories.length] =
> 'Another Category';
>
> org_ytho_controllerChanges(changes) report nothing.


If, instead of previous, I do :
           var a = 'Android BIOS CSS'.split(' ');
           a[a.length] = 'Dell Latitude d620';
           a[a.length] = 'FreeBox';
           a[a.length] = 'HackIntosh';
           a[a.length] = 'ImageMagick';
           a[a.length] = 'JavaSCript et DOM';
           org_ytho_controller.categories = a;

the changes are detected.

with :
           var a = org_ytho_controller.categories;
           a[a.length] = 'Dell Latitude d620';
           a[a.length] = 'FreeBox';
           a[a.length] = 'HackIntosh';
           a[a.length] = 'ImageMagick';
           a[a.length] = 'JavaSCript et DOM';
           org_ytho_controller.categories = a;

the changes aren't detected, i suppose this is because in the latest 
case the pointer didn't change.

[toc] | [prev] | [next] | [standalone]

#26566 — Resolved : Object.observe and Array

The solution is given here :
<http://www.html5rocks.com/en/tutorials/es7/observe/>
scroll down to "Observing arrays" giving :
Array.observe(model, function(changeRecords) {
   count++;
   console.log('Array observe', changeRecords, count);
});

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web