Polymer 2.0 - 我如何使用iron-ajax？
Nag*_*i A 8 polymer polymer-2.x
我试图绑定本地properties.json并尝试创建动态元素,但问题是我没有得到任何控制台错误,也没有在UI中看到JSON.
我没有找到使用的Polymer 2.0示例<iron-ajax>,但我发现仅适用于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数据
ton*_*y19 11
第一个问题是您的演示使用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为nullif <iron-ajax>.handleAs,json并且无法将响应解析为JSON.在您的情况下,无效的JSON properties.json将导致lastResponse设置为null,从而阻止您的示例呈现预期的字段.
这是一个有效的Polymer 2 <iron-ajax>演示(使用您的示例代码),并进行了所有更正:http:
//plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL？p = preview
| 归档时间： |
|
| 查看次数： |
6509 次 |
| 最近记录： |