聚合物中的數據綁定

我有這個函數，當它被調用時它給了我一個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種以上的方法，但我無法做到我想做的事。我是聚合物新手，請幫助我。

來源

2016-11-11 Nikhil Raghavendra

您是否考慮使用''元素來代替編寫此getJSON函數？ https://elements.polymer-project.org/elements/iron-ajax。您可以使用計算的綁定爲請求創建URL。 – LeBird

@LeBird該怎麼辦？我在做數據綁定時遇到了困難。 –

您可以使用Polymer的<iron-ajax>元素爲您提取數據，而不是編寫自己的getJSON()方法。

新聞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>將輸出消息API響應轉換data（即，如設置this.data = response，其中response高於JSON對象）。鑑於前面提到的數據的形狀，我們知道，data.articles將訪問物品陣列，它可以被傳遞給dom-repeat迭代：如果您需要處理響應勢在必行事先

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

或者，你可以setup an event listener爲<iron-ajax>.response事件。活動詳細信息包含.response中的數據。您可以處理/修改該數據，並將結果分配給中綁定的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>

來源

2016-11-11 21:26:53 tony19

我其實更喜歡JS的做法，因爲我正在對新聞文章進行一些處理。你能告訴我我是如何實現這一目標的嗎？無論如何，感謝您的幫助。 –

@NikhilRaghavendra查看更新的答案。我已經描述過如何設置處理程序來處理數據。 – tony19

所以變量：data將包含NewsAPI提供的JSON對象？ –

聚合物中的數據綁定

回答

相關問題