0

第一次使用这个 Web 组件......我能够将 var 中的 JSON 数据绑定到 vaadin-grid（w/polymer 1.0），但是我缺少一些关于将 JSON 数据从 url 获取到网格的基本知识。

这是我可以创建的最简单的示例，它使用硬编码的 JSON，现在使用 Vaadin 网站上的一些示例来尝试从 URL 中提取数据。

 <head> 
//  import statements same as in my example that works with hard coded JSON
  <script>
  function getJSON(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(JSON.parse(xhr.responseText));
          }
        };
        xhr.open('GET', url, true);
       xhr.send();
     }
    </script>
</head>
<body>
  <h2>Vaadin Grid - example </h2><br>
  <vaadin-grid selection-mode="multi">
    <table>
   <col name="name">
   <col name="city">
   </table>
  </vaadin-grid>

<script>
  var grid = grid || document.querySelector('vaadin-grid');

  HTMLImports.whenReady(function() {
    grid.items = function(params, callback) {
      var url = 'https://.../simple-data.json';
      getJSON(url, function(data) {
        callback(data[0]);
      });
    }; 
 });
</script>

并且 simple-data.json URL 返回：

[ { "name": "Jose Romero", "city": "Monteray" }, { "name": "Chuy Diez", "city": "Los Angeles" }, { "name": "Inez Vega", "city": "San Diego" } ]

我哪里错了？提前致谢。

4

2 回答 2

0

再次回答我自己的问题：要使用 JavaScript 而不是使用 Polymer Iron-ajax 组件将 JSON 绑定到 vaadin-grid，只需将此脚本部分添加到正文的底部。它为 WebComponentsReady 添加了一个事件侦听器。

<script type="text/javascript">
window.addEventListener('WebComponentsReady', function() {
  var grid = document.querySelector('vaadin-grid');
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        grid.items = json;
      }
     }
    };
    xhr.open('GET', 'http://<your_url>', true);
    xhr.send();
 });
</script>

对于开始使用 vaadin Polymer 组件的其他人，他们提供了一系列非常简短但非常出色的教程 - 在 YouTube 上搜索“vaadin 小学”以找到它们。

于 2016-09-01T19:43:31.370 回答
0

Binding is easily done using the Polymer 1.0 iron-ajax component. Here's the working code:

<head> 
//  import statements same as in my example that works with hard coded JSON
 <link rel="import" href="iron-ajax/iron-ajax.html">
 <link rel="import" href="vaadin-grid/vaadin-grid.html">
</head>
<body>
  <h2>Vaadin Grid - working example </h2><br>
  <template is="dom-bind">
    <iron-ajax 
      auto
      url = "http://hostname/.../simple-data.json"
      handle-as="json"
      last-response="{{gridData}}" ></iron-ajax>
    <vaadin-grid selection-mode="multi" items="{{gridData}}">
      <table>
        <col name="name">
        <col name="city">
      </table>
    </vaadin-grid>
  </template>
 <script>
 </script>
</body>

I still would like to learn how it's done using the JavaScript code in the Vaadin documentation Remote Data Any tips?

于 2016-09-01T18:46:54.257 回答