Polymer 1.0 services issue

Question

Я работаю над клиентом reddit с использованием полимера, чтобы проверить технологии веб-компонентов. Я начал с версии 0.5 и недавно вернулся к этому проекту. Это, когда я узнал, что у полимера был выпущен 1.0, поэтому я начал (как бы не продвинулся).

У меня есть служба, которая использует iron-ajax для запроса reddit api и поиска сообщений. Вот код:

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="reddit-list-service"> 
    <template> 
     <iron-ajax 
      url='https://www.reddit.com/new.json' 
      handle-as='json' 
      debounce-duration="300" 
      on-response='handleResponse' 
      debounce-duration="300" 
      auto> 

     </iron-ajax> 
    </template> 
</dom-module> 

<script> 
    (function() { 
     Polymer({ 
      is: 'reddit-list-service', 
      properties: { 
       modhash: { 
        type: String, 
        value: function() { 
         return ''; 
        } 
       }, 
       posts: { 
        type: Array, 
        value: function() { 
         return []; 
        } 
       }, 
       after: { 
        type: String, 
        value: function() { 
         return ''; 
        } 
       } 
      }, 

      // Update object properties from the ajax call response 
      handleResponse: function (resp) { 
       this.properties.modash = resp.detail.response.data.modhash; 
       this.properties.posts = resp.detail.response.data.children; 
       this.properties.after = resp.detail.response.data.after; 
       this.post = this.properties.posts; // just to try 
       console.log(this.properties.posts); 
      } 
     }); 
    })(); 
</script> 

Мой журнал показывает мне, что я получаю сообщения от API, и это здорово!

Вот проблема, когда я хочу, чтобы использовать эту услугу, чтобы составить список из массива сообщений я не могу понять, как получить их в свой список compoment, который находится ниже:

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../reddit-list-service/reddit-list-service.html"> 

<dom-module id="reddit-post-list"> 
    <template> 
     <reddit-list-service posts="{{posts}}"> 
     </reddit-list-service> 

     <template is="dom-repeat" id="post-list" posts="{{posts}}"> 
      <p>{{post.author}}</p> 
     <template> 
    </template> 
</dom-module> 

<script> 
    (function() { 
     Polymer({ 
      is: 'reddit-post-list', 
      properties: { 
      }, 
     }); 
    })(); 
</script> 

Я я несколько раз думал, что видел в документации, но не могу понять, что не так, свойство автора не появляется.

Любой ключ?

Answer 1

У вас есть несколько вещей, которые здесь не совсем правы. В reddit-post-list вы не используете шаблон dom-repeat. Смотрите ниже:

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="reddit-list-service.html"> 

<dom-module id="reddit-post-list"> 
    <template> 
     <reddit-list-service posts="{{posts}}"></reddit-list-service> 
     <template is="dom-repeat" items="[[posts]]"> 
      <p>{{item.data.author}}</p> 
     </template> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "reddit-post-list" 
    }); 
</script> 

Вам нужен атрибут items который является массивом dom-repeat Переберет. Внутри итерации вам нужно обратиться к item, так как это элемент массива для текущей итерации. Here - это документы.

Для вас reddit-list-service, вам необходимо установить на reflectToAttribute и notify атрибуты true на вашем posts собственности. Это означает, что любые изменения этого свойства отражаются в атрибуте posts на элементе reddit-list-service. См. here для получения дополнительной информации.

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="reddit-list-service"> 
    <template> 
     <iron-ajax auto url="https://www.reddit.com/new.json" handle-as="json" on-response="handleResponse"></iron-ajax> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "reddit-list-service", 
     properties: { 
      modhash: { 
       type: String, 
       value: "" 
      }, 
      posts: { 
       type: Array, 
       value: function() { 
        return []; 
       }, 
       reflectToAttribute: true, // note these two new attributes 
       notify: true 
      }, 
      after: { 
       type: String, 
       value: "" 
      } 
     }, 

     // Update object properties from the ajax call response 
     handleResponse: function (resp) { 
      this.modash = resp.detail.response.data.modhash; 
      this.posts = resp.detail.response.data.children; 
      this.after = resp.detail.response.data.after; 
     } 
    }); 
</script> 

Я также прибрал следующие вещи:

• Убран немедленно вызываемая функция обертка из <script> тегов, как они не нужен.
• При обращении к свойствам в вашем элементе вам нужно использовать только this.PROPERTYNAME, а не this.properties.PROPERTYNAME.
• Посмотрев на возвращенный JSON, выясняется, что свойство author находится на другом объекте под названием data.
• Когда вы объявляете значение для свойства в своем элементе, вам нужно только иметь функцию, которая возвращает значение, если тип свойства - Object или Array.