簡體   English   中英

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的唯一點必須存在於同一根目錄下。 這是例子

DEMO

 <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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM