Polymer - document.querySelector immer Rückkehr null/undefined

Question

Hier ist mein Code:

<dom-module id="my-view1"> 
    <template id="methodScope"> 
    <paper-dialog id="modal1"> 
     <paper-swatch-picker></paper-swatch-picker> 
     <paper-button dialog-confirm autofocus>Fertig</paper-button> 
    </paper-dialog> 
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast> 
    </template> 


    <script> 
    Polymer({ 
     is: 'my-view1', 
     }, 
     _alertColor: function(event) { 
     this.selectedColor = "works"; 
     this.$.copiedColor.open(); 
     } 
    }); 
    </script> 
    <script> 
     HTMLImports.whenReady(function() { 
     var t = document.querySelector('#methodScope'); 
     document.addEventListener('color-picker-selected', function(e) { 
      t._alertColor(); 
     }); 
     }); 
    </script> 
</dom-module> 

Egal, was ich versuche, alle Bemühungen, diese mit $ oder document.querySelector bei der Rückkehr nicht definiert oder null am Ende, sein es ist ein Element oder eine Funktion.

Wie kann ich die _alertColor-Funktion im Javascript außerhalb des Polymer-Skripts korrekt ausführen?

Probieren Sie es auch mit document.querySelector ('# my-view1');

Answer 1

Das Wichtigste zuerst, ich denke, es ist ein Tippfehler in Ihrem Code:

Polymer({ 
    is: 'my-view1', 
    }, 
    _alertColor: function(event) { 
    this.selectedColor = "works"; 
    this.$.copiedColor.open(); 
    } 
}); 

sollte wohl sein:

Polymer({ 
    is: 'my-view1', 
    _alertColor: function(event) { 
    this.selectedColor = "works"; 
    this.$.copiedColor.open(); 
    } 
}); 

auch: Sie definieren das Element aber Sie verwenden sie nicht überall in deinem Code. Sie müssen eine Instanz dieses Elements zu schaffen, um der Lage sein, seine Methoden zu verwenden:

<!-- define the element --> 
<dom-module id="my-view1"> 
    <template id="methodScope"> 
    <paper-dialog id="modal1"> 
     <paper-swatch-picker></paper-swatch-picker> 
     <paper-button dialog-confirm autofocus>Fertig</paper-button> 
    </paper-dialog> 
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-view1', 
     _alertColor: function(event) { 
     this.selectedColor = "works"; 
     this.$.copiedColor.open(); 
     } 
    }); 
    </script> 
</dom-module> 

<!-- use the element --> 
<my-view1></my-view1> 

    <script> 
    HTMLImports.whenReady(function() { 
    var t = document.querySelector('my-view1'); 
    document.addEventListener('color-picker-selected', function(e) { 
     t._alertColor(); 
    }); 
    }); 
</script> 

In einer realen Welt Anwendung, die komplexer ist, Sie sicherstellen möchten, dass das Element in das Dokument eingefügt wurde.

Auf Ihrer Website wird das Element beispielsweise erst im zweiten Schritt in das Dokument eingefügt und Sie klicken auf die "Farbe in Hex".

Dies ist, was lifecycle callbacks sind für die meisten in Ihrem Fall wahrscheinlich der „angehängt“ Rückruf:

<dom-module id="my-view1"> 
    <template id="methodScope"> 
    <paper-dialog id="modal1"> 
     <paper-swatch-picker id="colorpicker"></paper-swatch-picker> 
     <paper-button dialog-confirm autofocus>Fertig</paper-button> 
    </paper-dialog> 
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-view1', 
     _alertColor: function(event) { 
     this.selectedColor = "works"; 
     this.$.copiedColor.open(); 
     }, 
     attached: function() { 
     //this code is running when the element is put into the DOM 
     var self = this 
     this.$.colorpicker.addEventListener('color-picker-selected', function() { 
      self._alertColor() 
     }) 
     } 
    }); 
    </script> 
</dom-module>