web-dev-qa-db-ja.com

Polymer 2.0-iron-ajaxを使用するにはどうすればよいですか？

ローカルの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データの代わりに出力を下回っています enter image description here

polymerpolymer-2.x
8
Naga Sai A

最初の問題は、デモで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>_ がnullの場合、_<iron-ajax>.lastResponse_は自動的に _<iron-ajax>.handleAs_ をjsonに設定することに注意してください。応答をJSONとして解析することはできません。あなたの場合、_properties.json_の無効なJSONにより、lastResponseがnullに設定され、例で目的のフィールドがレンダリングされなくなります。

これが動作中のPolymer 2 _<iron-ajax>_デモ（サンプルコードを使用）で、すべての修正が行われました： http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview

11
tony19