Javascript 聚合物中的数据绑定

我有一个函数，它在调用时给我一个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>

{{json}}

---

我要做的是调用getJSON函数，调用函数并设置返回到纸卡中的

{{JSON}

数据元素的JSON值。我已经尝试了5种以上的方法，但我不能做我想做的事。我是polymer的新手，请帮助我。

您可以使用polymer的

元素为您获取数据，而不是编写自己的

getJSON（）

方法

新闻API看起来类似于此JSON对象：

{
“状态”：“确定”，
“来源”：“下一个网站”，
“sortBy”：“最新”，
“条款”：[{
“作者”：“TNW交易”，
“标题”：“您不想错过TNW交易的4个优惠”，
“描述”：“我们介绍了TNW的一些优秀产品……”，
}, {
“作者”：“布莱恩·克拉克”，
“标题”：“令人惊叹的北极光4k视频”，
“说明”：“调谐和区域输出…”，
}]
}

我假设您想显示

articles[]

数组中的每篇文章

元素可以从新闻API请求数据，并将服务器响应存储在其中，您可以将其绑定到可以在模板中使用的属性

在下面的示例中，我们看到

last response=“{{data}}”

，

将新闻API响应输出到

数据中（即，像设置
this.data=response
，其中
response
是上面的JSON对象）。考虑到前面提到的数据的形状，我们知道，
data.articles
将访问文章数组，该数组可以传递给进行迭代：

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

您可以使用Polymer的
元素来获取数据，而不是编写自己的
getJSON（）
方法

新闻API看起来类似于此JSON对象：

{
“状态”：“确定”，
“来源”：“下一个网站”，
“sortBy”：“最新”，
“条款”：[{
“作者”：“TNW交易”，
“标题”：“您不想错过TNW交易的4个优惠”，
“描述”：“我们介绍了TNW的一些优秀产品……”，
}, {
“作者”：“布莱恩·克拉克”，
“标题”：“令人惊叹的北极光4k视频”，
“说明”：“调谐和区域输出…”，
}]
}

我假设您想显示
articles[]
数组中的每篇文章

元素可以从新闻API请求数据，并将服务器响应存储在其中，您可以将其绑定到可以在模板中使用的属性

在下面的示例中，我们看到
last response=“{{data}}”
，
将新闻API响应输出到
数据中（即，像设置
this.data=response
，其中
response
是上面的JSON对象）。考虑到前面提到的数据的形状，我们知道，
data.articles
将访问文章数组，该数组可以传递给进行迭代：

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

您是否考虑使用<代码> <代码>元素而不是编写此GETJSON函数？您可以使用计算绑定来创建请求的URL。@LeBird怎么做？我在编写数据绑定方面遇到了困难。您是否考虑过使用<代码> <代码>元素来代替编写GETJSON函数？您可以使用计算绑定来创建请求的URL。@LeBird怎么做？我在进行数据绑定时遇到了困难。实际上我更喜欢JS方式，因为我正在处理新闻文章。你能告诉我我是怎么做到的吗？无论如何谢谢你的帮助。@NikhilRaghavendra请参阅更新的答案。我已经描述了如何设置处理程序来处理数据。因此变量：data将包含NewsAPI提供的JSON对象？@NikhilRaghavendra YesThanks获取帮助！我会接受这个答案。实际上我更喜欢JS的方式，因为我正在处理新闻文章。你能告诉我我是怎么做到的吗？无论如何谢谢你的帮助。@NikhilRaghavendra请参阅更新的答案。我已经描述了如何设置处理程序来处理数据。因此变量：data将包含NewsAPI提供的JSON对象？@NikhilRaghavendra YesThanks获取帮助！我会接受这个答案。