[英]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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.