Rahmen Attribut Element gibt Fehler „kann nicht eingestellt Eigenschaft‚...‘undefinierten‘ mit Polymer

Question

Ich versuche, ein benutzerdefiniertes Element unter Verwendung von Polymer einrichten, die in es mit einem Symbol eines ziehbar Box besteht. Ich würde Ich mag es, das Symbol zu definieren, indem ich ein icon-Attribut für das Element festlege, so dass ich deklarative Elemente erstellen kann, statt eine setIcon-Methode für das Element zu definieren, die nur über JavaScript zugänglich wäre mein Element einzurichten um das Attribut zu umgehen, indem ein properties Attribut für das Element Prototyp einschließlich I in Polymer Fütterung bin, mir Element Code geben, die etwa wie folgt aussieht:

var elementProto = { 
    is : "my-element", 
    behaviors : [someOtherProto], 
    properties : { 
     icon : { 
      "type" : "String", 
      "observer" : "_iconObserver", 
     } 
    }, 
    _iconObserver : function(){ /* Functionality for adding icon */} 
}; 

elementProto.otherMethods = various functions; 

Polymer(elementProto); 

In einer anderen Datei, versuche ich dann in einem anderen Javascript-Funktion mit setAttribute mein Symbol Attribut zu setzen, (nach meinem neuen Element über seine zugehörige HTML-Datei importieren) wie folgt:

var newElement = document.createElement("my-element"); 
newElement.setAttribute("icon", "some/icon/path.png"); 

Idealerweise dieses würde meine Beobachterfunktion mit dem neuen Pfad als Argument auslösen und ich würde die URL für das Bild in meinem neuen Element auf diesen Pfad setzen. Stattdessen gibt Chrome mir diesen Fehler:

Uncaught TypeError: Cannot set property 'icon' of undefined 

Warum ich diese Störung erhalte, und was kann ich tun, um es zu beheben?

Hinweise zur Fehlersuche:

Ich habe in den Polymer Code gegraben und festgestellt, dass der Fehler von dieser Linie stammt:

var model = this._clientsReadied ? this : this._config; 

Sowohl this._clientsReadied und this._config nicht definiert sind, die diesen Fehler verursacht in ._setAttributeToProperty(model, name); die Methode, bei name als Attribut auf model gesetzt ist. Ich weiß nicht genug über Polymer, um zu wissen, warum diese Attribute nicht definiert sind.

Answer 1

Why am I getting this error, and what can I do to fix it?

Sie erhalten diesen Fehler, da zu dem Zeitpunkt Sie createElement() aufrufen, Ihre benutzerdefinierte Element ist noch nicht registriert. Wahrscheinlich, weil die 2 Dateien in der falschen Reihenfolge geparst werden. Um dieses Problem zu beheben, können Sie versuchen, die Reihenfolge der importierten Dateien zu ändern, oder Sie können auf das Ereignis HTMLImportsLoaded oder WebComponentsReady warten.

document.addEventListener("HTMLImportsLoaded", function() 
{ 
    var newElement = document.createElement("my-element"); 
    newElement.setAttribute("icon", "some/icon/path.png"); 
});