0

paper-header-panel 要素に埋め込まれた vaadin-grid を使用してテーブル データを表示しようとしています。データは、Rest 呼び出しから取得されるはずです。使用される Rest クライアントは、最終応答属性を vaadin-grid の「items」属性にバインドしています。firebug を使用して HTML を検査しているときに、テーブルが適切に作成されていることを確認できますが、フロントエンドでは何も表示されません。

以下は私のカスタム要素です:「aws-api-gateway-call」 

<template>
    <iron-ajax
        auto
        url="{{url}}"
        handle-as="json"
        last-response="{{handleResponse}}">
     </iron-ajax>

    <vaadin-grid items="{{handleResponse}}" selection-mode="multi">
        <table>
          <colgroup>
              <col name="fileName">
              <col name="titleName">
              <col name="artist">
              <col name="albumName">
              <col name="action">
          </colgroup>
          <thead>
            <tr>
              <th style="z-index: 10">MP3 File Name</th>
              <th>Title Name</th>
              <th>Artist Name</th>
              <th>Album Name</th>
              <th>Action</th>
            </tr>
            </thead>
        </table>
      </vaadin-grid>

</template>

<script>
    Polymer({
          is: "aws-api-gateway-call",

          properties : {
              hostname:{
                  value: 'test',
                  notify: true
              },
              stage:{
                  value: 'test',
                  notify: true
              },
              method:{
                  value: 'test',
                  notify: true
              },
              url:{
                  computed: 'computeUrl(hostname, stage, method)'
              }
          },              
          computeUrl: function(hostname, stage, method){
              console.log('URL to call-->' + [hostname, stage, method].join('/'))
              return [hostname, stage, method].join('/')
          }
        });
    </script>

そして、これが私のものです：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>An Web-app to customize MP3 songs' metadata</title>
<link rel="shortcut icon" href="img/vector-black-ipod-10170961.jpg" />

    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="bower_components/prefixfree/prefixfree.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="elements/api_calls.html">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="fullbleed layout vertical">

        <paper-header-panel class="flex">
            <div class="paper-header ipodHeaderPanel">My Ipod Customizer Application</div>
            <div class="content">

                <aws-api-gateway-call 
                    hostname="https://<acct-id>.execute-api.us-west-2.amazonaws.com" 
                    stage="mp3file" 
                    method="MP3MetadataReadMicroService">                           
                </aws-api-gateway-call>

            </div>
        </paper-header-panel>


</body>
</html>

問題を理解するのを手伝ってもらえますか? そして、それを修正する方法は？

4

1 に答える 1