Question

我是聚合物的新手，我正在尝试在自定义元素中读取JSON数据并将其显示在其他元素中。

这是我的JSON数据：

jsonData.json

[
  {
    "name":"Ladies+Chrome+T-Shirt",
    "title":"Ladies Chrome T-Shirt"
  },
  {
    "name":"Ladies+Google+New+York+T-Shirt",
    "title":"Ladies Google New York T-Shirt"
  }
]

这是我的shop-app.html文件，我尝试从JSON文件中读取数据（我不确定这是否正确，因为我无法测试它）：

<dom-module id="shop-category-data">
  <script>
    (function(){
      class ShopCategoryData extends Polymer.Element {
        static get is() { return 'shop-category-data'; }
        static get properties() { return {
          data: {
              type: Object,
              computed: '_computeData()',
              notify: true
          }
        }}
        _computeData() {
            this._getResource( {
                url: 'data/jsonData.json',
                onLoad(e){
                    this.set('data.items', JSON.parse(e.target.responseText));
                }
            })
        }
        _getResource(rq) {
            let xhr = new XMLHttpRequest();
            xhr.addEventListener('load', rq.onLoad.bind(this));
            xhr.open('GET', rq.url);xhr.send();
          }
        }
      customElements.define(ShopCategoryData.is, ShopCategoryData);
    })();
  </script>
</dom-module>

这是我想要显示从JSON文件中读取的数据的元素：

<dom-module id="shop-app">
  <template>
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>
    <shop-category-data data="{{data}}"></shop-category-data>
    <template>
      <div> Employee list: </div>
      <template is="dom-repeat" items="{{data}}">
          <div>First name: <span>{{item.name}}</span></div>
          <div>Last name: <span>{{item.title}}</span></div>
    </template>
  </template>
  </template>
  <script>
    class ShopApp extends Polymer.Element {
      static get is() { return 'shop-app'; }
    }
    customElements.define(ShopApp.is, ShopApp);
  </script>
</dom-module>

行<shop-category-data data="{{data}}"></shop-category-data>应该给我数据，然后我尝试使用dom-repeat显示。但没有任何东西在展示。所以，我认为在阅读JSON数据时存在一些错误。

修改：
JSON被正确读取，它只是没有反映在我的：

中

<shop-category-data data="{{data}}"></shop-category-data>

Answer 1

计算属性未返回值。如果要将data定义为计算属性，则必须从计算属性函数_computeData()返回一个值。但在您的情况下，您使用的是异步XMLHttpRequest。因此，如果您在致电this._getResource...后返回值，则需要将其设为同步（无人推荐）。

用于同步方法的Plnkr：http://plnkr.co/edit/jdSRMR?p=preview

另一种方法是调用ready()内的方法。这是异步的。

Plnkr：http://plnkr.co/edit/pj4dgl?p=preview

Answer 2

它没有得到反映，因为json被分配到data.items，而不是data本身。

this.set('data', JSON.parse(e.target.responseText));

建议您使用<iron-ajax>，并废弃<shop-category-data>。例如替换以下行

<shop-category-data data="{{data}}"></shop-category-data>

与

<iron-ajax auto url="data/jsonData.json" handle-as="json"
    last-response="{{data}}"></iron-ajax>

使用Polymer读取和显示json数据

2 个答案: