Polimero osservatore condiviso: acquisizione della proprietà di origine

Ho una quantità di proprietà che desidero osservare con lo stesso osservatore condiviso. Diciamo, voglio monitorare la cronologia delle modifiche. Purtroppo, il callback dell'osservatore polimero di serie, according to the documentation, ha un prototipo di ingenua:Polimero osservatore condiviso: acquisizione della proprietà di origine

myObserver: function(oldValue, newValue) {}

Dal momento che vorrei tenere traccia dei cambiamenti, ho bisogno di sapere il nome della proprietà modificata. Con la retroingegnerizzazione dello arguments di myObserver, ho scoperto sorprendentemente che esiste un terzo argomento di tipo Arguments[3] passato alla funzione. Quindi il codice^W woodoo-magia di sotto farebbe il trucco:

myObserver: function() { 
    if (arguments.length > 2) { // observer called by polymer 
    var args = arguments[2]; 
    var idx = args[1].length - 1; // sic! index of changed is stored in index 
    var prop = args[2][idx * 2 + 1][0]; 
    var val = args[0][idx]; 

    console.log("Property [" + prop + "] got new value: " + val); 
    } 
    ... 
}

Essere sano di mente e desiderio di rimanere sani di mente, voglio sapere se mi mancava modo più amabile per ottenere il nome dell'attributo cambiato dall'osservatore.

@ebidel e @robdodson vuoi far luce su questo? arguments[2] sarebbe supportato nelle versioni più recenti? C'è un modo migliore per reagire alle modifiche?

Grazie in anticipo.

fonte

2015-02-01 mudasobwa

Penso che stiate cercando un meccanismo diverso. Se davvero accettassi di adottare un meccanismo diverso per implementare la funzionalità che ti serve, potrebbe non essere dannoso controllare MutationObserver. Sono riuscito a giocare con la demo in this answer e ho potuto facilmente registrare la mia console di cromo sugli elementi che questo MutationObserver stava osservando.

Spero che questo aiuti!

fonte

2015-02-21 18:36:32 vortex

Sì, grazie, so di 'MutationObserver'. Potrei persino usare il listener di eventi 'DOMSubtreeModified'. La domanda riguardava l'utilizzo del gestore di eventi già esistente, fornito da _Polymer_. – mudasobwa

Quindi, se ho capito bene, l'obiettivo è quello di utilizzare un singolo osservatore per più modifiche di proprietà, e all'interno dell'osservatore è necessario essere in grado di determinare il nome della proprietà che è cambiata.

Ho sperimentato un po 'e ho scoperto che è possibile ottenere questo risultato con osservatori di sub-proprietà profonde.

<!doctype html> 
<html> 
<head> 
<meta name="description" content="http://stackoverflow.com/questions/28265025"> 
    <meta charset="utf-8"> 
    <base href="http://polygit.org/components/"> 
    <script href="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
</head> 
<body> 
    <dom-module id="x-el"> 
    <template> 
     <p>path: {{path}}</p> 
     <p>value: {{value}}</p> 
     <button on-click="incrementNumber1">increment number 1</button> 
     <button on-click="incrementNumber2">increment number 2</button>  
    </template> 
    <script> 
     Polymer({ 
     is: 'x-el', 
     properties: { 
      path: { 
      type: String, 
      notify: true 
      }, 
      value: { 
      type: String, 
      notify: true 
      }, 
      number1: { 
      type: Number, 
      value: 0, 
      notify: true 
      }, 
      number2: { 
      type: Number, 
      value: 0, 
      notify: true 
      }, 
     }, 
     observers: [ 
      'onChange(number1.*)', 
      'onChange(number2.*)' 
     ], 
     incrementNumber1: function() { 
      this.number1 += 1; 
     }, 
     incrementNumber2: function() { 
      this.number2 += 1; 
     },   
     onChange: function(changeRecord) { 
      this.path = changeRecord.path; 
      this.value = changeRecord.value; 
     } 
     }); 
    </script> 
    </dom-module> 
    <x-el></x-el> 
</body> 
</html>

https://jsbin.com/pufexay/edit?html,output

fonte

2016-06-15 16:21:13

Polimero osservatore condiviso: acquisizione della proprietà di origine

risposta

Problemi correlati