約束事から得られたポリマーにデータバインディング値を設定する

Question

サーバーからJSON形式のスケジュールデータを取得し、それを使用してdom-repeatを使用してスケジュールをレンダリングしようとしています。

JSONをハードコードするとコードは正常に動作しますが、フェッチを使用して設定しても機能しません。

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

    } 

}); 

Answer 1

@Alanは、2番目のthenコールバックで、指摘したように：

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

thisはトンを参照していませんoあなたのPolymerオブジェクト。コールバックは、thisが定義されていないPolymerオブジェクトのコンテキスト外で呼び出されます。非strictモードでは、thisがグローバルオブジェクトにデフォルトで設定されます（window）ので、実際にはwindow.scheduleを設定しています。これはconsole.log(this) in the callbackで確認できます。 MDNは良いreference on this in regards to function contextを提供します。 （ES6中）

アロー機能はその問題を持っていない、とthisは外側のコンテキストのthis（高分子オブジェクト）にバインドされます：

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

あなたはES5を使用していると仮定すると、（またはしないことを好みますES6-to-ES5 transpiler）を使用するために、あなたのコールバックに代わりにそこthisを使用してのあなたの高分子オブジェクトへの参照を渡すことによって、あなたの高分子オブジェクトのscheduleプロパティを設定することができます。

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

"use strict"を宣言することにより、thisがグローバルオブジェクトにデフォルト設定されないようにすることができます。

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

はここES5のデモです：plunker