Невозможно отобразить данные в полимере api

Question

Я использовал полимер example, и они использовали core-ajax для вызова api.I хочу отобразить текст из openweathermap api.Когда я вызываю api, он не отображает данные. способный отображать любые данные, и когда я разместил console.log (this.post) в элементе post-list, он дает мне undefined.Im практически noob, когда дело доходит до полимера.

Ниже Апи вызова метода

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

Это элемент используется для отображения

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

Пример 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 
    } 
] 

Мой апи ответа (json)

{ 
    "coord": { 
     "lon": 78.47, 
     "lat": 17.38 
    }, 
    "weather": [ 
     { 
      "id": 802, 
      "main": "Clouds", 
      "description": "scattered clouds", 
      "icon": "03d" 
     } 
    ], 
    "base": "cmc stations", 
    "main": { 
     "temp": 303.15, 
     "pressure": 1010, 
     "humidity": 62, 
     "temp_min": 303.15, 
     "temp_max": 303.15 
    }, 
    "wind": { 
     "speed": 7.7, 
     "deg": 280 
    }, 
    "clouds": { 
     "all": 40 
    }, 
    "dt": 1436677800, 
    "sys": { 
     "type": 1, 
     "id": 7830, 
     "message": 0.0124, 
     "country": "IN", 
     "sunrise": 1436660330, 
     "sunset": 1436707470 
    }, 
    "id": 1269843, 
    "name": "Hyderabad", 
    "cod": 200 
} 

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

Было бы легче увидеть, что произойдет, если добавить слушателя на 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> 

Наконец, если вы начинаете с полимером, я предлагаю вам начать с версии 1.0.