我正在尝试绑定(bind)本地 properties.json并尝试创建动态元素，但问题是我没有收到任何控制台错误，也没有在 UI 中看到 JSON。
我没有找到使用 <iron-ajax> 的 Polymer 2.0 示例，但我只找到了适用于 Polymer 1.0 的。
这是我尝试过的代码:
polymer 输入.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 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。看起来您打算对数组数据使用方括号；并且您的 key 缺少引号。您会注意到通过 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
关于Polymer 2.0 - 我如何使用 Iron-ajax？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44685680/