Iron-list 不显示从 iron-ajax 获取的数据答案

【问题标题】：Iron-list doesn't show data fetched from iron-ajaxIron-list 不显示从 iron-ajax 获取的数据
【发布时间】：2018-02-24 14:44:10
【问题描述】：

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

【问题讨论】：

标签： javascript polymer iron-ajax iron-list

【解决方案1】：

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

【讨论】：

它们在同一个根目录下，handle-as="json" 不起作用。但我注意到有一个错误：property-accessors.html:259 Polymer::Attributes: could't decode Array as JSON: [[data]]。这可能会有所帮助..
是的，丹妮，我也看到了。我认为您所得到的——以及我对自己的疑惑——为什么必须将这两个自定义元素包装在父自定义元素中才能工作？该父级是否正是共享data 属性所需要的？我想是的。
@Thad 你了解包装元素了吗？我也很好奇。你需要这些来让示例工作吗？
不，@clapas，我从来没有这样做过。此后不久，我切换到lit-html 和LitElement，我使用fetch 和render。我现在没有 iron- 或 paper- 组件。（我还发现 JS 模块 比 HTML Imports 更容易使用。）