Datenbindung in Polymer

Question

Ich habe diese Funktion, die mir einen JSON-Rückgabewert gibt, wenn es aufgerufen wird.

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

Und um die Funktion aufzurufen, verwende ich den folgenden Code.

Und dann habe ich eine Papierkarte, an die ich den JSON-Wert binden möchte, den ich bekomme.

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

Was möchte ich tun, ist, dass Anruf, der die getJSON Funktion der Polymer Art und Weise zu erklären, rufen Sie die Funktion und stellen Sie die JSON-Wert auf den in der Papierkarte {{json}} Datenelement zurückgegeben. Ich habe mehr als 5 Möglichkeiten ausprobiert, aber ich konnte nicht tun, was ich wollte. Ich bin neu in Polymer, also bitte hilf mir.

Answer 1

Anstatt Ihre eigene getJSON() Methode zu schreiben, können Sie das Element <iron-ajax> von Polymer verwenden, um die Daten für Sie abzurufen.

Die Nachrichten API data ähnelt diesem JSON-Objekt:

{ 
    "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 …", 
    }] 
} 

Und ich nehme an, Sie jeden Artikel aus dem articles[] Array angezeigt werden soll.

Das <iron-ajax>-Element konnte die Daten von der News-API anfordern und die Serverantwort in lastResponse speichern, die Sie an eine Eigenschaft binden konnten, die in Ihrer Vorlage verwendet werden konnte.

In dem folgenden Beispiel, wo wir last-response="{{data}}", <iron-ajax> ausgeben wird das Nachrichten-API-Antwort in data (das heißt, wie this.data = response Einstellung, bei der das response JSON Objekt oben ist) zu sehen. Aufgrund der Form der zuvor genannten Daten, wissen wir, dass data.articles die regelmäßige Anordnung von Artikeln zugreifen würde, die dom-repeat für Iteration weitergegeben werden kann:

<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> 

Alternativ, wenn Sie die Antwort unbedingt vorher manipulieren müssen, könnten Sie setup an event listener für das Ereignis <iron-ajax>.response. Das Ereignisdetail enthält die Daten in .response. Sie könnten diese Daten bearbeiten/ändern und die Ergebnisse this.articles zuweisen, die in dom-repeat gebunden sind.

<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>