2015-02-01 7 views
6

Ich habe eine Anzahl von Eigenschaften, die ich mit demselben geteilten Beobachter beobachten möchte. Lassen Sie uns sagen, ich möchte Änderungshistorie verfolgen. Leider hat der Standardpolymer Beobachter Rückruf, according to the documentation, ein kunstlos Prototyp:Gemeinsamer Polymer-Beobachter: Erhalten der Ursprungseigenschaft

myObserver: function(oldValue, newValue) {} 

Da möchte ich auf Änderungen den Überblick behalten, muss ich den Namen der Eigenschaft geändert wissen. Durch Reverse-Engineering der arguments von myObserver, entdeckte ich überraschend, dass es ein drittes Argument vom Typ Arguments[3] an die Funktion übergeben wird. So ist die Code^W woodoo-Magie unten würde den Trick:

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); 
    } 
    ... 
} 

Sein gesund und Verlangen zu bleiben gesund, ich mag wissen, ob ich liebenswürdige Weise verpassten die geänderte Attributnamen von dem Beobachter zu bekommen.

@ebidel und @robdodson würden Sie bitte etwas Licht darauf werfen? Wird die arguments[2] in den neuesten Versionen unterstützt? Gibt es eine bessere Möglichkeit, auf Veränderungen zu reagieren?

Vielen Dank im Voraus.

Antwort

0

Ich denke, dass Sie nach einem anderen Mechanismus suchen. Wenn Sie in der Tat akzeptieren würden, einen anderen Mechanismus zu implementieren, um die Funktionalität zu implementieren, die Sie benötigen, könnte es nicht schaden, MutationObserver zu überprüfen. Ich habe es geschafft, mit der Demo in this answer herumzuspielen und konnte meine Chrom-Konsole leicht die Elemente aufzeichnen, die dieser MutationObserver beobachtete.

Hoffe, das hilft!

+0

Ja, danke, weiß ich über 'MutationObserver'. Ich könnte sogar 'DOMSubtreeModified' Event Listener verwenden. Die Frage bezog sich auf die Verwendung bereits vorhandener Event-Handler, die von _Polymer_ bereitgestellt wurden. – mudasobwa

0

Also, wenn ich richtig verstehe, ist das Ziel, einen einzelnen Beobachter für mehrere Eigenschaftenänderungen zu verwenden, und innerhalb des Beobachters müssen Sie in der Lage sein, den Namen der geänderten Eigenschaft zu bestimmen.

Ich experimentierte ein wenig herum und fand heraus, dass Sie dies mit einem tiefen Sub-Eigenschaft Beobachter erreichen können.

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

Verwandte Themen