Question

第一次使用这个Web组件...我能够将var中的JSON数据绑定到vaadin-grid（w / polymer 1.0），但是遗漏了一些关于从网址获取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" } ]

我哪里错了？提前谢谢。

Answer 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文档中的JavaScript代码完成Remote Data任何提示？

Answer 2

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

＆＃13;

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

＆＃13;

对于其他开始使用vaadin Polymer组件的人来说，他们有一系列非常简短但优秀的教程 - 搜索YouTube以及＃34; vaadin小学＆＃34;找到他们。

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

2 个答案: