Fehler "Uncaught TypeError: Kann die Eigenschaft 'src' von Null nicht in einer dom-repeat

Question

setzen Ich habe eine Dom-Wiederholung, wo ich ein Bild mit einem SRC basierend auf Funktion einfügen möchte. Diesmal löst die Verwendung des Index in der Funktion das Problem nicht, und jetzt stecke ich fest. Polymer-Version ist 1.8.0 ich bisher verschiedene Wege versucht, letzte ist:

<template is="dom-repeat" items="{{top.top}}" as="item"> 
     <img id="testid" src="{{imgurl}}"> 
</template> 

<script> 
    Polymer({ 
    is: 'test', 

    ready: function() { 
// Polymer.dom(this).querySelector('testid').src = this.imgurl; 
this.$.testid.src = this.imgurl; 
    } , 

properties: { 
    top: { 
     type: Array, 
     value: function() { return []; } 
    }, 

    imgurl: { 
     type: String, 
     notify: true, 
     reflectToAttribute: true, 
     computed: 'changeimg(score, oldscore)' 
     } 
    }, 

    changeimg: function(score, oldscore) { 

     if(score>oldscore){url = "images/reddown.png";} 
     else if(score<oldscore){url ="images/greenup.png";} 
     else {url = "images/blueorizontal.png";} 
     return url; 
    }, 

.... 


    }); 
</script> 

immer das Ergebnis ist das gleiche ... Jede ideea? Danke

Answer 1

Das Problem ist in der Linie computed: 'changeimg(score, oldscore)'.

Sie haben score und oldscore nicht definiert. Dies ist ein berechneter Wert, nicht ein Beobachter.

Also, die Definition dieser wird das Problem lösen.

Answer 2

Die this.$ funktioniert nur für Elemente, die Teil Ihres Elements sind, wenn es zum ersten Mal erstellt wird. Bei Verwendung von dom-repeat oder dom-if wird dies nicht der Fall sein, daher existiert this.$.testid nicht, was zu dem Fehler führt, den Sie sehen.

Auch Ihr anderer Versuch, der querySelector verwendet, gibt nur ein img-Element zurück, aber wenn es gerendert wird, haben Sie ein img-Element für jeden Ihrer Punkteeinträge.

Die berechnete Eigenschaft imgurl wird Ihnen auch nicht helfen, weil Ihr Element nur eine Imgurl-Eigenschaft hat, die immer die gleiche wäre, auch wenn Score-Werte zur Verfügung gestellt werden, egal welcher Score-Eintrag angezeigt wird.

Der Weg, um Ihr Problem zu lösen, ist eine computed binding verwenden, die die richtige img src für jede der angezeigten Ergebnisse berechnet.

<img src="[[changeimg(item.score, item.oldscore)]]">