Polymer веб исключение приложение элемент пустой указатель

Question

Я пользователь железо-лист с железом Аякса, но после того, как АЯКС ответ при нажатии элемента железа списка дает нулевое исключение = «Не удается прочитать свойство„_list“неопределенных»

<script> 

    Polymer({ 
     is: 'my-home', 

     ready: function() { 
      this.$._ajax.generateRequest(); 
     }, 

     onResponse: function (e) { 

      var people = e.detail.response.data; 
      people.forEach(function (person) { 
       this.$._list.push('items', person); 
      }); 
      // Clear the lower threshold so we can load more data when the user scrolls down again. 
      this._scrollTheshold.clearTriggers(); 
     } 

    }); 

</script> 

вот мой HTML код железа список

<iron-list id="_list" items="[[data.data]]" as="item"> 
     <template> 

      <div style="margin-top: 0px"> 

       <!--Card with header image http://placehold.it/350x150/FFC107/000000--> 
       <paper-card> 

        <div class="card-content"> 
         <h1 class="feed_title">[[item.heading]]</h1> 

         <p class="feed_description">[[item.subheading]]</p> 
        </div> 
        <div class="card-actions"> 
         <paper-button class="button-blue"> 
          Share 
         </paper-button> 
         <paper-button class="button-blue"> 
          Explore 
         </paper-button> 
        </div> 
       </paper-card> 
      </div> 
     </template> 
    </iron-list> 

Answer 1

в вашем выражении функции forEach(), this относится к Window объекта, а не объект Polymer. (При использовании "use strict" здесь, this бы undefined, но мне кажется, что это не так для вас.)

Несколько вариантов, чтобы исправить это:

• Вариант 1: Используйте ES6 arrow function, который не делает привязку свой собственный this (при условии, ES6 доступен для вас):

  onResponse: function (e) { 
      var people = e.detail.response.data; 
      people.forEach(person => { 
      this.$._list.push('items', person); 
      }); 
      ... 
  } 
  

• Вариант 2: Использование ES6 for-of loop, убрав необходимость обратного вызова (при условии, ES6 доступен для вас):

  onResponse: function (e) { 
      var people = e.detail.response.data; 
      for (const person of people) { 
      this.$._list.push('items', person); 
      }); 
      ... 
  } 
  

• Вариант 3: Используйте ES6 spread operator толкать все элементы массива на один раз (при условии, ES6 доступен для вас):

  onResponse: function (e) { 
      var people = e.detail.response.data; 
      this.$._list.push('items', ...people); 
      ... 
  } 
  

• Вариант 4: Передайте ссылку на объект Polymer:

  onResponse: function (e) { 
      var self = this; 
      var people = e.detail.response.data; 
      people.forEach(function (person) { 
      self.$._list.push('items', person); 
      }); 
      ... 
  } 
  

• Вариант 5: передать ссылку на объект списка:

  onResponse: function (e) { 
      var list = this.$._list; 
      var people = e.detail.response.data; 
      people.forEach(function (person) { 
      list.push('items', person); 
      }); 
      ... 
  } 
  

• Вариант 6: Явное связать this в вашем выражении функции:

  onResponse: function (e) { 
      var people = e.detail.response.data; 
      people.forEach(function (person) { 
      this.$._list.push('items', person); 
      }.bind(this)); 
      ... 
  } 
  

• Вариант 7: Pass this в качестве второго параметра forEach():

  onResponse: function (e) { 
      var people = e.detail.response.data; 
      people.forEach(function (person) { 
      this.$._list.push('items', person); 
      }, this); 
      ... 
  } 
  

Answer 2

Добавление к @ tony19 годов ответ также можно получить с помощью bind

people.forEach(function (person) { 
    this.$._list.push('items', person); 
}.bind(this));