So ändern Sie src eines Eisen-Bildelements von Google Polymer

Vielen Dank. Ich habe endlich ein gutes Ergebnis bekommen. Das Problem war, dass ich die Standardnutzung der Funktion getUrl(), die von Google bereitgestellt wird, nicht verstanden habe.So ändern Sie src eines Eisen-Bildelements von Google Polymer

Neue Frage: Lesen Sie die wertvollen Antworten, denke ich über das verbleibende Problem wie folgt. Lassen Sie mich fragen, wie Sie den Src-Wert eines Iron-Page-Objekts ändern, nachdem der ursprüngliche src-Wert im Kontext der alten Frage festgelegt wurde.

Alte Frage: Lass mich nach Google Polymer fragen. Hier folgt ein Code aus meinem Projekt. Ich möchte einfach die src eines Eisen-Bildelements ändern. Ich habe zwei Versionen für die "ready" -Funktion getestet. Beide änderten jedoch nicht die Src des Eisenbildelements. Könnten Sie auf meinen Code hinweisen?

<iron-image id="id1" src="[[mysrc]]"></iron-image> 

    Polymer({ 

    properties { mysrc = { type:String , notify:true } }, 

    (version 1) ready: function() { mysrc = getUrl(); } 

    (version 2) ready: function() { this.$.id1.src = getUrl(); } 

    })

Im Detail zeigt alert (getUrl()) die erwartete korrekte Zeichenfolge.

Quelle

2016-06-14 yuzu

Es gibt keinen Grund, warum Ihr Code nicht funktionieren sollte. Könntest du ein vollständigeres Beispiel hier oder auf Plunker, JSbins, etc. posten? –

Ändern des 'mysrc' Wertes von einer Funktion mit 'this.mysrc = {something}' sollte den Wert von 'src' ändern. – a1626

Bitte bevorzugen Sie einen neuen Thread für eine neue Frage. Sie können immer Ihre eigene Frage beantworten, wenn Sie die Antwort bekommen haben. Sie können bei Bedarf auch einen Link für eine alte Frage in eine neue einfügen. – a1626

Könnte es sein, dass Sie Ihre Eigenschaften und Methoden nicht im richtigen Kontext aufrufen? Um eine Eigenschaft festzulegen und eine Methode aufzurufen, müssen Sie sie von this referenzieren. Mit anderen Worten,

--- ready: function() { mysrc = getUrl(); } 
+++ ready: function() { this.mysrc = this.getUrl(); }

Hier ist ein JS Bin, die richtig das Szenario behandelt die Sie beschreiben:

<!doctype html> 
<html> 

<head> 
    <meta name="description" content="http://stackoverflow.com/questions/37811023"> 
    <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"> 
    <link href="iron-image/iron-image.html" rel="import"> 
    <link href="paper-button/paper-button.html" rel="import"> 
</head> 

<body> 
    <dom-module id="my-el"> 
    <template> 
     <iron-image src="[[url]]"></iron-image> 
    </template> 
    <script> 
     Polymer({ 
     is: 'my-el', 
     properties: { 
      url: { 
      type: String, 
      notify: true 
      } 
     }, 
     ready: function(e) { 
      this.url = this.getUrl(); 
     }, 
     getUrl: function() { 
      return 'http://lorempixel.com/300/300'; 
     } 
     }); 
    </script> 
    </dom-module> 
    <my-el></my-el> 
</body> 

</html>

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

Quelle

2016-06-15 00:14:53

Danke für die Antwort. Es hilft mir sehr. Für meinen Kontext hat es nicht funktioniert. Wahrscheinlich, weil mein getUrl() zu spät ist, so dass es die URL zurückgibt, nachdem die Iron-Page seinen ursprünglichen src-Wert, einen Nullwert, festgelegt hat. Wahrscheinlich ist mein letztes Problem einfach. Das heißt, wie ändert man den src-Wert des Eisenbildes, nachdem der ursprüngliche src-Wert eingestellt wurde. – yuzu

@KayceBasques FYI, ich habe festgestellt, dass Sie auf ** http **: //jsbin.com verlinkt haben, was zu einer Weiterleitung an ** https **: //jsbin.com führt. Die Demo '' verweist auf ** http **, was zu einem 'Mixed Content' Fehler und einer leeren Seite führt. – tony19

Danke für die Köpfe up @ tony19 –

sollten Sie

versuchen

ready: function() { this.mysrc = getUrl(); }

oder

ready: function() { this.set('mysrc', getUrl());

In Version 1 eine Variable verweisen, die nicht existieren, weil eine Eigenschaft zu this binden wird.

In Version 2 sollte funktionieren.

Quelle

2016-06-14 11:54:41 zeitiger

Nach Ihrer Antwort habe ich beide Versionen erneut versucht, aber die gleichen schlechten Ergebnisse erhalten. Die "src" änderte sich nicht. Die Version eins ergibt keinen Fehler, während Version zwei besagt, dass "this. $. Id1.src" nicht definiert ist. – yuzu

So ändern Sie src eines Eisen-Bildelements von Google Polymer

Antwort

Verwandte Themen