Блог

Я пытаюсь получить доступ к переменной в массиве как член элемента polymer. Но я продолжаю получать «Не удается прочитать свойство NaN неопределенного». Это мой код, я получаю ошибку при этом.images[this.x]:

 <link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="big-picture" noscript>

<template>
    <style>
    #crop
    {
        display: block;
        position: relative;
    }
    #mainpictop
    {
        position: absolute;
        width: 100%;
    }
    #mainpicbottom
    {
        position: absolute;
        width: 100%;
    }
    </style>

    <div id="crop">
        <img id="mainpictop" src={{pic1source}} style="opacity:{{pic1opacity}}"></img>
        <img id="mainpicbottom" src={{pic2source}} style="opacity:{{pic2opacity}}"></img>
    </div>


</template>
<script>
    Polymer('big-picture',{
        x:1,
        currentTop:0,
        currentBottom:1,
        numpics:5,
        transitionspeed:200,
        images: new Array,
        pic1opacity: 1,
        pic2opacity:1,
        pic1source: "img/main/1.jpg",
        pic2source: "img/main/2.jpg",
        ready: function(){


            for (i=0;i<this.numpics;i  )
            {
                this.images[i]="img/main/".concat(i 1).concat(".jpg");
            }

            setInterval(function() {
                changeImageSrc()
          },this.transitionspeed);
        }
    });
    function changeImageSrc() {

    if(this.pic1opacity==1)
    {
        this.pic1opacity=0;
        this.pic2opacity=1;
        if (this.currentTop!=this.currentBottom)  
            this.pic2source = this.images[this.x];
        else
        {
            this.x=this.x 1;
            if(this.x===this.numpics)
                this.x=0;
            this.pic2source = this.images[this.x];
        }
        this.currentBottom=this.x;
    }
    else
    {
        this.pic2opacity=0;
        this.pic1opacity=1;
        if (this.currentTop!=this.currentBottom)  
            this.pic1source = this.images[this.x];
        else
        {
            this.x=this.x 1;
            if(this.x===this.numpics)
                this.x=0;
            this.pic1source = this.images[this.x];
        }
        this.currentTop=this.x;

    }



  this.x=this.x 1;
  if(this.x===this.numpics)
    this.x=0;
}

</script>
</polymer-element>
  

Я только начал изучать Polymer, поэтому, пожалуйста, не будьте слишком суровыми.

Это проблема области видимости. Будьте очень осторожны при использовании «this» в других функциях, потому что контекст «this» изменяется на функцию, в которой он находится. В вашем случае для переменной «this» было установлено значение changeImageSrc() в контексте changeImageSrc().

Простое решение — сохранить ссылку на «this» в другой переменной ( var _this = this; ) и использовать эту новую переменную, когда вам нужно выполнить действия с вашими переменными Polymer.