Wie drucken Sie den Inhalt (Attribute) eines Polymer-Objekts?

Question

Ich bin ein wenig erstaunt, dass ich keine Erklärung dafür finden konnte, wie es so aussieht, als ob es ziemlich elementar zum Debuggen ist, aber ich kann nirgends finden, wie man die Attribute eines Objekts in Polymer druckt .

Ich lerne Polymer und ich laufe weiter in Situationen, wo ich ein Objekt habe, aber ich habe keine Ahnung, was die Attribute des Objekts sind. (Beispiel: Ich drucke in das Fenster, und ich bekomme [object Object]. Ich habe einige Erklärungen gefunden, wie ich eine Liste der Schlüssel/Attribute eines Objekts ausdrucken kann (ich weiß, wie man die Werte für diese Schlüssel druckt, wenn ich wissen, was sie sind), aber ich habe keine Ahnung, wie Sie die Schlüssel erhalten, wenn ich nicht bereits das Format meiner Daten kenne. Jedes Beispiel setzt voraus, dass Sie bereits wissen, was die Attribute sind.

Ich habe gesehen, Lösungen zu empfehlen ein Skript hinzufügen:

getKeys : function(o){ 
    return Object.keys(o); 
} 

Und dann so etwas wie dieses sie empfehlen:

<template is="dom-repeat" items="{{ item in obj | getKeys}}"> 
    {{item}} 
</template> 

Aber ich denke, sie müssen vielleicht eine frühere Version von Polymer abarbeiten. Die meisten stammen aus dem Jahr 2014 und ich weiß, dass sich die Bibliothek seitdem sehr verändert hat.

Dies ist das nächste, was ich mit diesem Code zu einem Fehler:

Polymer::Attributes: couldn`t decode Array as JSON 

Hier ist ein example post diese Strategie zu empfehlen. Ich verstehe, dass ich tiefer in die Dokumentation eintauchen und versuchen könnte zu verstehen, welche Reaktion zurückkommen soll, aber ich bin eher neugierig, was die allgemeine Strategie für diese Situation ist - ich wollte schon mehrmals sehen, wie Polymer ist etwas modellieren, wie ich es dachte.

Answer 1

Der Beitrag, den Sie erwähnen, empfiehlt eine Methode, die nicht mehr mit Post-1.0-Polymer möglich ist, die diese Syntax von Filtern/Pipes (ab der aktuellen Version, 1.5.0) nicht unterstützt.

Sie könnten DevTools verwenden, um das Polymerelement auszuwählen und dann console.dir($0) ausführen. Dies funktioniert in den folgenden Browsern (und vielleicht auch ältere Versionen):

• Chrome 50
• Firefox 45
• Safari 9.1
• Opera 39

Chrome und Opera Anzeige aller Schlüssel (auch geerbt von HTMLElement) in sortierter Reihenfolge, so kann es mühsam sein, durch die lange Liste der Schlüssel für eine Polymer-spezifische Eigenschaft zu scannen. Firefox und Safari listen jedoch zunächst polymerspezifische Schlüssel und dann die vererbten Schlüssel auf.

Eine Abhilfe für Chrome/Opera ist diese Schnipsel zu verwenden:

((o) => { 
    let obj = {}; 
    Object.keys(o).sort().forEach((x) => { 
    obj[x] = o[x]; 
    }); 
    console.dir(obj); 
})($0); 

Hier ist eine codepen, die die Attribute eines paper-button protokolliert. Sie müssen nicht auf die Schaltfläche klicken. Öffnen Sie das Konsolenprotokoll des Browsers (nicht die Codepen-Konsole), um etwas wie den Screenshot unten zu sehen. Sie können die Felder im Konsolenprotokoll erweitern, um die Attribute des Polymer-Objekts anzuzeigen.

Answer 2

Die Lösung, die ich verwendet haben ist folgende:

1. Legen Sie eine Taste irgendwo auf der sichtbaren Seite.
2. Wenn diese Schaltfläche angetippt wird, drucken Sie das Objekt auf die Konsole.

my-element.html

<button on-tap="show">Click here to see user</button> 
... 
show: function() { 
    console.log('user', this.user); 
}, 
... 

Answer 3

Sie können auch console.dir() wie folgt verwenden.

<my-element id="foo"></my-element> 
... 
bar: function() { 
    console.dir(this.$.foo); 
}