Question

我使用的是聚合物example，他们使用core-ajax来调用api。我想显示openweathermap api中的文本。当我调用api时，它显示没有数据。我无法显示任何数据，当我在post-list元素中放置console.log（this.post）时，它给了我undefined。在聚合物方面，我几乎是一个菜鸟。

以下是Api呼叫方法

w_E

这是元素用于显示

<polymer-element name="post-service" attributes="posts">
  <template>
    <style>
    :host {
      display: none;
    }
    </style>
    <core-ajax id="ajax"
      auto
      url="http://api.openweathermap.org/data/2.5/weather?q=hyderabad"
      on-core-response="{{postsLoaded}}"
      handleAs="json">
    </core-ajax>
  </template>
  <script>
  Polymer('post-service', {
    created: function() {
      this.posts = [];
    },
    postsLoaded: function() {
      // Make a copy of the loaded data
      this.posts = this.$.ajax.response;
    },
    /** 
     * Update the service with the current favorite value.
     * (Two-way data binding updates the favorite value 
     * stored locally.) If this was a real service, this
     * method would do something useful.
     * 
     * @method setFavorite
     * @param uid {Number} Unique ID for post.
     * @param isFavorite {Boolean} True if the user marked this post as a favorite.
     */
    setFavorite: function(uid, isFavorite) {
      // no service backend, just log the change
      console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
    }
  });
  </script>
</polymer-element>

示例json

<polymer-element name="post-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    post-card {
      margin-bottom: 30px;
    }
    </style>

    <post-service id="service" posts="{{posts}}">
    </post-service>

    <div layout vertical center>

      <template>
        <post-card>
          <h2>{{post.weather.main}}</h2>
          <p>{{post.weather.description}}</p>
        </post-card>
      </template>
    </div>
  </template>
  <script>
  Polymer({});
  console.log(this.post);
  </script>
</polymer-element>

我的api回复（json）

[
  {
    "uid": 1,
    "text" : "Have you heard about the Web Components revolution?",
    "username" : "Eric",
    "avatar" : "../images/avatar-01.svg",
    "favorite": false
  },
  {
    "uid": 2,
    "text" : "Loving this Polymer thing.",
    "username" : "Rob",
    "avatar" : "../images/avatar-02.svg",
    "favorite": false
  }
]

Answer 1

core-ajax元素在收到数据时发送事件。要使用它们，您必须操纵已触发的事件。

postsLoaded: function(event, detail) {
  // Event contains lot of informations
  console.log(event);
  // Detail would be the received data
  console.log(detail);
  // Make a copy of the loaded data
  this.posts = detail; // or this.posts = event.detail;
}

如果在元素 post-list 中的posts属性上添加侦听器，会更容易看到会发生什么。请参阅doc部分观察属性。

<script>
Polymer({
  postsChanged: function(oldValue, newValue) {
    console.log(newValue);
  }
});
</script>

此外，我认为你的代码中有拼写错误。在模板中，您使用的是帖子而没有帖子：

<template>
  <post-card>
    <h2>{{post.weather.main}}</h2>
    <p>{{post.weather.description}}</p>
  </post-card>
</template>

最后，如果您从Polymer开始，我建议您从版本1.0开始。

无法在聚合物api中显示数据

1 个答案: