如何将远程 JSON 数据绑定到 Polymer vaadin-grid？答案

【问题标题】：How to bind remote JSON data to a Polymer vaadin-grid?如何将远程 JSON 数据绑定到 Polymer vaadin-grid？
【发布时间】：2016-08-31 22:24:01
【问题描述】：

第一次使用这个 Web 组件...我能够将 var 中的 JSON 数据绑定到 vaadin-grid（带有聚合物 1.0），但是缺少一些关于从 url 获取 JSON 数据到网格。

这是我可以创建的最简单的示例，它使用硬编码的 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" } ]

我哪里错了？提前致谢。

【问题讨论】：

标签： polymer-1.0 vaadin-grid

【解决方案1】：

使用 Polymer 1.0 iron-ajax 组件可以轻松完成绑定。这是工作代码：

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

我仍然想了解它是如何使用 Vaadin 文档 Remote Data 中的 JavaScript 代码完成的，有什么提示吗？

【讨论】：

【解决方案2】：

再次回答我自己的问题：要使用 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 小学”以找到它们。

【讨论】：