聚合物中的数据绑定

我有这个函数，当它被调用时它给了我一个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对象？ –

聚合物中的数据绑定

回答

相关问题