アレイはポリマープロパティオブザーバ内のforEachで '未定義'になります

Question

私は狂った運転をする問題がありますが、なぜこれが起こっているのか理解できません。

私はカスタムのポリマー要素を持っています。この要素には、この要素に配列を設定しています。この要素には値が変数にバインドされています。その変数にはオブザーバーがあり、変数の変更私は配列を反復していくつかの簡単なチェックを行う関数を実行します。入力値が6-9の範囲に入るまではすべてうまく動作します。その範囲では、配列iはその範囲を終了するまで 'undefined'になります。オブザーバをその配列にアタッチし、配列が 'undefined 'オブザーバーは解雇されていないので、実際の配列は変更されていないと思います。ここで

コード

<link rel="import" href="../custom_elements/paper-file-input.html"> 
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 
<dom-module id="property-editor"> 

    <style> 

     :host{ 
      height: 100%; 
      width: 100%; 
     } 

     .background { 
      background: #565456; 
      padding: 8pt; 
     } 

     .full{ 
      width: 100%; 
      height:100%; 
     } 

     .title{ 
      color: white; 
      font-size: 14pt; 
     } 

     .prop{ 
      --paper-input-container-color: white; 
      --paper-input-container-focus-color: #e8745c; 
      --paper-input-container-input-color: white; 
     } 

    </style> 

    <template style="width:100%; height:100%;"> 
     <div class="background full"> 
      <p class="roboto title"><b>PROPRIETA':</b></p> 
      <template is="dom-if" if="{{selected}}"> 
       <div class="altfullright" style="overflow:auto;"> 
        <span class="roboto propsec">Tempo:</span> 
        <div style="display:flex; align-items:center;"> 
         <paper-input class="prop" style="width:100%; margin-right:8pt;" type="number" label="Da" value="{{from}}" min="0" max="100"></paper-input> 
         <paper-input class="prop" style="width:100%;" type="number" label="A" value="{{to}}" min="0" max="100"></paper-input> 
        </div> 
        <span class="roboto propsec">Posizione:</span> 
        <div style="display:flex; align-items:center;"> 
         <paper-input class="prop" style="width:100%; margin-right:8pt;" type="number" label="Left" value="{{left}}" min="0" max="1000"></paper-input> 
         <paper-input class="prop" style="width:100%;" type="number" label="Top" value="{{top}}" min="0" max="1000"></paper-input> 
        </div> 
        <span class="roboto propsec">Generale:</span> 
        <paper-input class="prop" label="Nome" value="{{nome}}"></paper-input> 
        <template is="dom-if" if="{{_or(button, link, text)}}"> 
         <paper-input class="prop" label="Testo" value="{{testo}}"></paper-input> 
        </template> 
        <template is="dom-if" if="{{_or(button, link, text)}}"> 
         <span class="roboto propsec">Testo:</span> 
         <paper-input class="prop" type="number" label="Dimensione font" min="0" max="100"></paper-input> 
         <paper-color-input allow-alpha class="prop" shape="square" type="hsl" label="Colore font"></paper-color-input> 
         <paper-dropdown-menu class="prop" label="Famiglia font"> 
          <paper-listbox class="dropdown-content"> 
           <paper-item>Roboto</paper-item> 
           <paper-item>Arial</paper-item> 
           <paper-item>Common Sans</paper-item> 
          </paper-listbox> 
         </paper-dropdown-menu> 
        </template> 
        <span class="roboto propsec">Elemento:</span> 
        <paper-file-input class="prop" label="Sfondo"></paper-file-input> 
        <paper-color-input allow-alpha class="prop" shape="square" type="hsl" label="Colore sfondo"></paper-color-input> 
       </div> 
       <div> 
        <paper-button raised class="fullwidth white" on-tap="_handleTimestamp">AGGIORNA</paper-button> 
       </div> 
      </template> 
      <template is="dom-if" if="{{!selected}}"> 
       <div class="altfullright" style="overflow:auto;"> 
        <span class="roboto propsec" style="font-size:12pt;">Seleziona un elemento</span> 
       </div> 
       <div> 
        <paper-button raised disabled class="fullwidth white">AGGIORNA</paper-button> 
       </div> 
      </template> 
     </div> 
    </template> 

    <script> 
     Polymer({ 
      is: 'property-editor', 

      properties:{ 
       nome:{ 
        type:String, 
        observer: '_nameChanged' 
       }, 
       selected:{ 
        type:Boolean 
       }, 
       testo:{ 
        type:String, 
        observer: '_textChanged' 
       }, 
       from:{ 
        type:String, 
        observer: '_fromChanged' 
       }, 
       to:{ 
        type:String, 
        observer: '_toChanged' 
       }, 
       left:{ 
        type:Number, 
        observer: '_leftChanged' 
       }, 
       top:{ 
        type:Number, 
        observer: '_topChanged' 
       }, 
       timestamps:{ 
        type:Array, 
        observer: '_timeChanged' 
       } 
      }, 

      ready: function(){ 
       this.selected = false; 
       var app = this; 
       $(document).on('element-selected', function(e){ 
        app._handleSelection(e.detail.selected); 
       }); 
      }, 

      _retrieveOverlayTimestamps: function(){ 
       var app = this; 
       $.ajax({ 
        url: 'php/get-timestamp.php', 
        method: 'POST', 
        data: {'id': app.id}, 
        success: function(data){ 
         var result = JSON.parse(data); 
         this.timestamps = result; 
        } 
       }); 
      }, 

      _timeChanged: function(newValue, oldValue){ 
       console.log("Changed to: "+newValue); 
      }, 

      _or: function(condition, other){ 
       if(condition || other){ 
        return true; 
       } 
       return false; 
      }, 

      _or: function(condition, other, third){ 
       if(condition || other || third){ 
        return true; 
       } 
       return false; 
      }, 

      _fromChanged: function(newValue, oldValue){ 
       if(newValue < this.to){ 
        this.timestamps.forEach(function (elem) { 
         if(newValue >= elem.from && newValue < elem.to){ 
          this.timevalid = false; 
         }else if(newValue < elem.from && this.to >= elem.to){ 
          this.timevalid = false; 
         } 
        }); 
       }else{ 
        this.timevalid = false; 
       } 
       console.log(this.timevalid); 
      }, 

      _toChanged: function(newValue, oldValue){ 
       if(this.from < newValue){ 
        this.timestamps.forEach(function (elem) { 
         if(newValue < elem.to && newValue >= elem.from){ 
          this.timevalid = false; 
         } 
        }); 
       }else{ 
        this.timevalid = false; 
       } 
       console.log(this.timevalid); 
      }, 

      _leftChanged: function(newValue, oldValue){ 

      }, 

      _topChanged: function(newValue, oldValue){ 

      }, 

      _nameChanged: function(){ 
       var app = this; 
       $.ajax({ 
        url: 'php/update-elem.php', 
        method: 'POST', 
        data: {'property':'overlay_name', 'value':this.nome, 'id':app.id}, 
        success: function(){ 
         app.fire('element-changed'); 
        } 
       }); 
      }, 

      _textChanged: function(){ 
       var app = this; 
       $.ajax({ 
        url: 'php/update-elem.php', 
        method: 'POST', 
        data: {'property': 'overlay_props', 'value':this.testo, 'id':app.id}, 
        success: function(){ 
         app.fire('element-changed'); 
        } 
       }); 
      }, 

      _handleTimestamp: function(e){ 

      }, 

      _handleSelection: function(index){ 
       this.selected = true; 
       this.timevalid = true; 
       this.id = index; 
       this._retrieveOverlayTimestamps(); 
       var app = this; 
       $.ajax({ 
        url:"php/get-selected.php", 
        method: 'POST', 
        data: {'id':index}, 
        success: function(data){ 
         var result = JSON.parse(data); 
         var element = result[0]; 
         var elementstr = $(result[0].type); 
         var tagName = $(elementstr).prop("tagName"); 
         app.nome = element.name; 
         app.testo = $(elementstr).html(); 
         app.from = element.from; 
         app.to = element.to; 
         app.left = element.x; 
         app.top = element.y; 
         if(tagName == "PAPER-BUTTON"){ 
          if($(element).hasClass('link')){ 
           app.link = true; 
           app.button = false; 
           app.image = false; 
           app.text = false; 
          }else{ 
           app.link = false; 
           app.button = true; 
           app.image = false; 
           app.text = false; 
          } 
         } 
        } 
       }); 
      } 
     }); 
    </script> 

</dom-module> 

である私は6-9の範囲を入力したときにスローされるエラーが助けてください、この1

property-editor.html:183 Uncaught TypeError: Cannot read property 'forEach' of undefined 

ですが、私は途方に暮れてよ...

おかげ

Answer 1

Ajax呼び出しの内部this

_retrieveOverlayTimestamps: function(){ 
    var app = this; 
    $.ajax({ 
     url: 'php/get-timestamp.php', 
     method: 'POST', 
     data: {'id': app.id}, 
     success: function(data){ 
      var result = JSON.parse(data); 
      this.timestamps = result; //<-- wrong 
     } 
    }); 
} 

...この* forEachの中の*を付した_fromChangedと_toChangedで

app.timestamps = result;