2

我是 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"}
  ]
4

1 回答 1

0

一切看起来都不错。唯一的点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>

于 2018-02-24T18:09:05.603 回答