ポリマーのデータバインド

Question

私はこの関数を呼び出して、JSONの戻り値を呼び出します。

getJSON function(url, success){ 
var ud = '_' + +new Date, 
     script = document.createElement('script'), 
     head = document.getElementsByTagName('head')[0] 
       || document.documentElement; 
     window[ud] = function(data) { 
      head.removeChild(script); 
      success && success(data); 
     }; 
     script.src = url.replace('callback=?', 'callback=' + ud); 
     head.appendChild(script); 
} 

そして、この関数を呼び出すには、次のコードを使用します。

getJSON('https://newsapi.org/v1/articles?source=techcrunch&apiKey={APIKEY}', function(data){ 
      //Stuff to be done with the data 
     }); 

次に、取得したJSON値をバインドする紙カードがあります。私が何をしたいか

<paper-card heading="Card Title"> 
     <div class="card-content">{{json}}</div> 
</paper-card> 

はgetJSON関数を呼び出すと、JSONの値は紙のカードで{{json}}データ要素に戻って設定され、ポリマーのように機能宣言し、その呼び出しです。私は上記の5つ以上の方法を試みましたが、私が望むことをすることができませんでした。私はポリマーに新しいので、私を助けてください。

Answer 1

getJSON()メソッドを記述する代わりに、Polymerの<iron-ajax>要素を使用してデータを取得することができます。

ニュースAPI dataは、このJSONオブジェクトのようになります。

{ 
    "status": "ok", 
    "source": "the-next-web", 
    "sortBy": "latest", 
    "articles": [{ 
    "author": "TNW Deals", 
    "title": "4 offers from TNW Deals you won’t want to miss", 
    "description": "We’ve featured some great offers from TNW …", 
    }, { 
    "author": "Bryan Clark", 
    "title": "Amazing 4k video of the Northern Lights", 
    "description": "Tune in, and zone out …", 
    }] 
} 

そして、私はあなたがarticles[]配列から各記事を表示したいと仮定します。

要素<iron-ajax>は、News APIからデータを要求し、サーバー応答をlastResponseに格納することができます。これはテンプレートで使用できるプロパティにバインドできます。我々が見る次の例で

、last-response="{{data}}"、<iron-ajax>意志出力dataにニュースAPI応答（すなわち、response上記のJSONオブジェクトであるthis.data = responseを設定するなど）。あなたがsetup an event listenerをできた、あなたは命令的、あらかじめ応答を操作する必要がある場合は、代わりに

<template> 
    <iron-ajax url="https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=|APIKEY|" 
      auto 
      last-response="{{data}}"> 
    </iron-ajax> 

    <template is="dom-repeat" items="[[data.articles]]"> 
    <paper-card heading="[[item.title]]"> 
     <div class="card-content"> 
     <p>[[item.description]]</p> 
     </div> 
    </paper-card> 
    </template> 
</template> 

：前述のデータの形状を考えると、我々はdata.articlesは反復のためdom-repeatに渡すことができます記事の配列を、アクセスしていることを知っています<iron-ajax>.responseイベントの場合イベント詳細には、.responseのデータが含まれています。あなたはそのデータを処理/修正し、dom-repeatに束縛されたthis.articlesに結果を割り当てることができます。

<template> 
    <iron-ajax url="https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=|APIKEY|" 
      auto 
      on-response="_onResponse"> 
    </iron-ajax> 

    <template is="dom-repeat" items="[[articles]]"> 
    <paper-card heading="[[item.title]]"> 
     <div class="card-content"> 
     <p>[[item.description]]</p> 
     </div> 
    </paper-card> 
    </template> 
</template> 

<script> 
    Polymer({ 
    ... 
    _onResponse: function(e) { 
     var data = e.detail.response; 
     // do something with data... 

     // set this.articles for dom-repeat 
     this.articles = data; 
    } 
    }); 
</script>