设置从诺言获得的聚合物中的数据绑定值 [英] Setting the data-binding value in polymer that was obtained from a promise

问题描述

我正在尝试从服务器获取JSON格式的计划数据，并使用它来通过dom-repeat呈现时间表.

I am trying to fetch the schedule data in JSON format, from the server and use that to render the schdule using a dom-repeat.

如果我对JSON进行硬编码，则该代码可以正常工作，但是如果使用fetch进行设置，则该代码将无法正常工作.

The code works fine if I hard-code the JSON, but if I set it using fetch, it does not work.

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

<dom-module id="xl-schedule">
<template>

<h1> Excel Schedule </h1>

<template is="dom-repeat" items="{{schedule}}">
    <div># <span>{{index}}</span></div>
    <div>Event name: <span>{{item.name}}</span></div>
    <div>Date: <span>{{item.date}}</span></div>
</template>

<script>
Polymer({
  is: 'xl-schedule',
  ready: function() {

    // this.schedule = 
    // [
    //   {
    //     "name": "Event1",
    //     "date": "5/10/2016"
    //   },

    //   {
    //     "name": "Event2",
    //     "date": "5/10/2016"
    //   },

    //   {
    //     "name": "Event3",
    //     "date": "5/10/2016"
    //   }
    // ];

    fetch('resources/schedule.json').
    then(function (response) {
        return response.json();
    }).
    then(function (response) {
      this.schedule = response;
      console.log("response",JSON.stringify(response));
    })
    .catch(function(err) {
      console.log("err",err);
    });

  }

});

推荐答案

正如@Alan指出的那样，在第二个then回调中:

As @Alan pointed out, in your second then callback:

then(function(response) {
  this.schedule = response; // this === window
})

this不引用您的Polymer对象.回调是在您的Polymer对象的上下文之外调用的，未定义this.在非严格模式下，结果为默认为全局对象，即window，因此实际上是在设置window.schedule.您可以通过回调中的 console.log(this)进行验证. MDN在this方面提供了很好的参考功能上下文.

this does not refer to your Polymer object. The callback is invoked outside your Polymer object's context, where this is not defined. In non-strict mode, that results in this defaulting to the global object, which is the window, so you're actually setting window.schedule. You can verify that with console.log(this) in the callback. MDN provides a good reference on this in regards to function context.

箭头功能(在ES6中)不存在此问题，并且this将绑定到封闭上下文的this(聚合物"对象):

Arrow functions (in ES6) don't have that problem, and this would be bound to the enclosing context's this (the Polymer object):

then(response => this.schedule = response) // this === Polymer obj

假设您使用的是ES5(或者不想使用 ES6-to-ES5编译器)，则可以通过传递对您的Polymer对象的引用而不是在其中使用this来设置您的Polymer对象的schedule属性，方法是:

Assuming you're using ES5 (or prefer not to use an ES6-to-ES5 transpiler), you can set the schedule property of your Polymer object by passing to your callback a reference to your Polymer object instead of using this there:

Polymer({
  ...
  ready: function() {
    var self = this; // this === Polymer obj
    fetch(...)
      .then(function(response) {
        self.schedule = response;
      });
  }
});

请注意，您可以通过声明"use strict"来防止this默认为全局对象.这将导致this保持为undefined，当您无意间将this分配给this.schedule时，将导致有用的(快速失败)错误:

Note you could prevent this from defaulting to the global object by declaring "use strict". This would cause this to stay undefined, which would cause a helpful (fail-fast) error when you accidentally assign to this.schedule with an unintentional this:

"use strict";
Polymer({
  ...
  ready: function() {
    fetch(...)
      .then(function(response) {
        this.schedule = response; // TypeError: Cannot set property 'schedule' of undefined 
      });
  }
});

这是一个ES5演示: plunker

Here's an ES5 demo: plunker

这篇关于设置从诺言获得的聚合物中的数据绑定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！