Polymer 2.0 - 我如何使用 Iron-ajax？答案

【问题标题】：Polymer 2.0 - How do I use iron-ajax?Polymer 2.0 - 我如何使用 Iron-ajax？
【发布时间】：2017-06-21 20:26:45
【问题描述】：

我正在尝试绑定本地 properties.json 并尝试创建动态元素，但问题是我没有收到任何控制台错误，也没有在 UI 中看到 JSON。

我没有找到使用 <iron-ajax> 的 Polymer 2.0 示例，但我找到了仅适用于 Polymer 1.0 的示例。

这是我尝试过的代码：

polymer-input.html

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">

<dom-module id="polymer-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-ajax auto="" url="properties.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
    <template is="dom-repeat" items="[[ajaxResponse]]">
      <span>[[item.name]]</span>
    </template>
    <h2>Hello [[prop1]]!..[[ajaxResponse]]</h2>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class PolymerApp extends Polymer.Element {
      static get is() { return 'polymer-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'polymer-app'
          }
        };
      }
    }

    window.customElements.define(PolymerApp.is, PolymerApp);
  </script>
</dom-module>

index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>polymer</title>
    <meta name="description" content="custom ele">


    <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents-loader.js"></script>

    <link rel="import" href="polymer-app/polymer-app.html">
    <link rel="import" href="polymer-input/polymer-input.html">
  </head>
  <body>
    <polymer-app></polymer-app>
   </body>
</html>

properties.json：

{
  {
    name:"Name",
    type:"string",
    size:20
  },
  {
    name:"Age",
    type:"number",
    size:20
  }
}

我得到低于输出而不是属性 json 数据

【问题讨论】：

auto 是标志属性，和hidden 一样，所以去掉后面的=""。另外，您是否看到该文件是在“网络”选项卡下的开发人员工具中收到的？除此之外，我所能做的就是给你一个赞成票，因为我有同样的问题，不知道如何处理它。
polymer-project.org/0.5 开头的三个 URL 是 404。而且，0.5 甚至不是 Polymer 1.0。它们完全不同，而且不兼容。

标签： polymer polymer-2.x

【解决方案1】：

第一个问题是您的演示使用 Polymer 0.5 的基本 URL，而您的代码使用 Polymer 2.0 语法。也就是这段代码：

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">

...应该是这样的：

<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/iron-ajax/iron-ajax.html">

其次，您的 properties.json 文件包含无效的 JSON。看起来您打算对数组数据使用方括号；并且您的密钥缺少引号。您会注意到通过JSON.parse() 运行文件内容会引发错误。这段文字：

{
  {
    name:"Name",
    type:"string",
    size:20
  },
  {
    name:"Age",
    type:"number",
    size:20
  }
}

...应该是这样的：

[
  {
    "name":"Name",
    "type":"string",
    "size":20
  },
  {
    "name":"Age",
    "type":"number",
    "size":20
  }
]

第三，注意<iron-ajax>自动将<iron-ajax>.lastResponse设置为null如果<iron-ajax>.handleAs是json并且响应不能被解析为JSON。在您的情况下，properties.json 中的无效 JSON 将导致 lastResponse 设置为 null，从而阻止您的示例呈现预期的字段。

这是一个有效的 Polymer 2 <iron-ajax> 演示（使用您的示例代码），并进行了所有更正： http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview

【讨论】：

@NagaSaiA 没问题 :)
plnkr 示例在 IE 中不起作用。 IE 用户仍然存在（不幸的是）。有没有办法让它在 IE 中工作？