Polymer 2.0 — Как использовать iron-ajax?

Я пытаюсь связать локальный properties.json и пытаюсь создать динамические элементы, но проблема в том, что я не получаю никаких ошибок консоли и не вижу JSON в пользовательском интерфейсе.

Я не нашел примера Polymer 2.0 для использования <iron-ajax>, но нашел примеры только для 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>

свойства.json:

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

Я получаю вывод ниже вместо данных свойств json введите здесь описание изображения


polymer polymer-2.x
person Naga Sai A    schedule 21.06.2017    source источник
comment
auto является атрибутом флага, как и hidden, поэтому удалите ="" после него. Кроме того, вы видите, что файл был получен в инструменте разработчика на вкладке «Сеть»? Кроме этого, все, что я могу сделать, это дать вам голос, потому что у меня такая же проблема, и я не знаю, как с ней справиться.   -  person user1911283    schedule 22.06.2017
comment
Три URL-адреса, начинающиеся с polymer-project.org/0.5, равны 404. И 0,5 — это даже не Полимер 1.0. Они совершенно разные и несовместимые.   -  person Frank R.    schedule 22.06.2017

Ответы (1)


arrow_upward
11
arrow_downward

Первая проблема заключается в том, что в вашей демонстрации используется базовый URL-адрес для Polymer 0.5, а в вашем коде используется синтаксис 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. В вашем случае недопустимый JSON в properties.json приведет к тому, что lastResponse будет установлено в null, что не позволит вашему примеру отображать предполагаемые поля.

Вот рабочая демонстрация Polymer 2 <iron-ajax> (с использованием вашего примера кода) со всеми внесенными исправлениями: http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview

person tony19    schedule 22.06.2017
comment
@NagaSaiA Нет проблем :) - person tony19; 22.06.2017
comment
Пример plnkr не работает в IE. Пользователи IE все еще существуют (к сожалению). Есть ли способ заставить его работать в IE? - person Octopus; 24.04.2018