json - 使用 Polymer 读取和显示 json 数据

Question

我是 polymer 的新手，我正在尝试读取自定义元素中的 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 被正确读取，只是没有反射(reflect)在我的:

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

Answer 1

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

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

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

请联系:http://plnkr.co/edit/pj4dgl?p=preview