聚合物2.0 - 如何使用iron-ajax？

我想綁定本地properties.json並試圖創建動態元素，但問題是我沒有得到任何控制檯錯誤，並沒有看到在用戶界面中的JSON。聚合物2.0 - 如何使用iron-ajax？

我沒有找到使用<iron-ajax>的Polymer 2.0示例，但是我發現僅適用於Polymer 1.0。

這裏是我試過的代碼：

聚合物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數據

來源

2017-06-21 Naga Sai A

'auto'是一個標誌屬性，就像'hidden'，所以刪除'=「」'後它。此外，您是否看到該文件是在開發人員工具的「網絡」選項卡下收到的？除此之外，我能做的就是給你一個贊成票，因爲我有同樣的問題，不知道如何處理它。 – user1911283

以https://www.polymer-project.org/0.5/開頭的三個URL是404.而且，0.5甚至沒有Polymer 1.0。它們完全不同，並且不兼容。 –

第一個問題是您的演示使用用於聚合物0.5的基本URL，而你的代碼是使用聚合物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，從而阻止您的示例呈現預期字段。

這裏的工作聚合物2 <iron-ajax>演示（使用示例代碼）與所做的所有更正： http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview

來源

2017-06-22 05:24:58 tony19

謝謝@ tony19 ..它工作的很棒:) –

@NagaSaiA沒問題:) – tony19

聚合物2.0 - 如何使用iron-ajax？

回答

相關問題