Iron-list 不显示从 iron-ajax 获取的数据
Iron-list doesn't show data fetched from iron-ajax
我是 Polymer 的新手,所以我尝试了几乎所有我在 Internet 上找到的东西,但没有用。我只有一个白页。我做错了什么?
这是我的代码
<!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>ScuolaMedia</title>
<meta name="description" content="ScuolaMedia description">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
</head>
<body>
<iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
</body>
</html>
还有这个data.json:
[
{"name": "Bob"},
{"name": "Tim"},
{"name": "Mike"}
]
一切看起来都不错。唯一的一点就是handle-as="json"
和data.json必须存在于同根。这是例子
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-list/iron-list.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<web-app>test ( if you see 'test' message, necassary libraries could not loaded. Try this later and check dev tools.(F12) </web-app>
<dom-module id="web-app">
<template>
<style>
:host {
display: block;
height: 100%;
}
</style>
<iron-ajax url="https://randomuser.me/api?results=10" handle-as="json" last-response="{{users}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
</template>
<script>
HTMLImports.whenReady(function() {
class WebApp extends Polymer.Element {
static get is() { return 'web-app'; }
static get properties() { return {
data:{
type:Array,
value() {return [];}
}
}};
static get observers() { return ['checkDataLoaded(users)']}
checkDataLoaded(s){
console.log(s);
this.set('data', [{"name": "Bob marley"},{"name": "Timothy Dallas"},{"name": "Mike Jaegers"}])
}
}
customElements.define(WebApp.is, WebApp);
});
</script>
</dom-module>
</body>
</html>
我是 Polymer 的新手,所以我尝试了几乎所有我在 Internet 上找到的东西,但没有用。我只有一个白页。我做错了什么? 这是我的代码
<!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>ScuolaMedia</title>
<meta name="description" content="ScuolaMedia description">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
</head>
<body>
<iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
</body>
</html>
还有这个data.json:
[
{"name": "Bob"},
{"name": "Tim"},
{"name": "Mike"}
]
一切看起来都不错。唯一的一点就是handle-as="json"
和data.json必须存在于同根。这是例子
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-list/iron-list.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<web-app>test ( if you see 'test' message, necassary libraries could not loaded. Try this later and check dev tools.(F12) </web-app>
<dom-module id="web-app">
<template>
<style>
:host {
display: block;
height: 100%;
}
</style>
<iron-ajax url="https://randomuser.me/api?results=10" handle-as="json" last-response="{{users}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
</template>
<script>
HTMLImports.whenReady(function() {
class WebApp extends Polymer.Element {
static get is() { return 'web-app'; }
static get properties() { return {
data:{
type:Array,
value() {return [];}
}
}};
static get observers() { return ['checkDataLoaded(users)']}
checkDataLoaded(s){
console.log(s);
this.set('data', [{"name": "Bob marley"},{"name": "Timothy Dallas"},{"name": "Mike Jaegers"}])
}
}
customElements.define(WebApp.is, WebApp);
});
</script>
</dom-module>
</body>
</html>