/ / Einstellen des Datenbindungswertes in Polymer, der aus einem Versprechen erhalten wurde - JSON, Datenbindung, Versprechen, Polymer, Fetch

Festlegen des Datenbindungswerts in einem Polymer, das aus einem Versprechen erhalten wurde - JSON, Datenbindung, Versprechen, Polymer, Fetch

Ich versuche, die Zeitplandaten im JSON-Format vom Server abzurufen und diese zu verwenden, um das Schema mit einem Dom-Repeat zu rendern.

Der Code funktioniert gut, wenn ich den JSON fest codiere, aber wenn ich ihn mit fetch einstelle, funktioniert er nicht.

<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);
});

}

});

Antworten:

4 für die Antwort № 1

Wie @Alan darauf hingewiesen hat, in deinem zweiten then Rückrufen:

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

this bezieht sich nicht auf Ihr Polymer-Objekt. Der Rückruf wird außerhalb des Kontexts Ihres Polymer-Objekts aufgerufen this ist nicht definiert. In nichtstreng Modus, der ergibt this Standard auf das globale Objekt, das ist die window, also stellst du tatsächlich ein window.schedule. Sie können das mit bestätigen console.log(this) im Rückruf. MDN bietet ein gutes Referenz auf this in Bezug auf den Funktionskontext.

Pfeilfunktionen (in ES6) haben dieses Problem nicht, und this wäre an den umschließenden Kontext "s gebunden this (das Polymer-Objekt):

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

Angenommen, Sie verwenden ES5 (oder verwenden lieber kein ES6-zu-ES5-Transpiler), können Sie das einstellen schedule Eigenschaft Ihres Polymer-Objekts, indem Sie an Ihren Rückruf eine Referenz zu Ihrem Polymer-Objekt übergeben, anstatt sie zu verwenden this Dort:

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

Beachten Sie, dass Sie verhindern könnten this von Standard auf das globale Objekt durch Deklaration "use strict". Dies würde verursachen this bleiben undefined, die einen hilfreichen Fehler (Fail-Fast) verursachen würde, wenn Sie versehentlich zuweisen this.schedule mit einem unbeabsichtigten this:

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

Hier ist eine ES5-Demo: Plünderer