为什么这个聚合物元素的属性解析为未定义？

Question

我试图动态地为iron-ajax模板分配属性,但它解析为未定义.

<dom-module id="products-service">
  <style>
    :host {
      display: none;
    }
  </style>

  <template>
    <iron-ajax id="productsajax"
      auto
      url="http://localhost:3003/api/taxons/products"
      params='{"token":"my-token"}'
      method='GET'
      on-response='productsLoaded'
      handleAs='json'>
    </iron-ajax>
  </template>
</dom-module>

<script>
(function() {
    Polymer({
        is: 'products-service',

        properties: {
            categoryid: {
                type: String,
                notify: true,
                reflectToAttribute: true
            }
        },

        //here I am trying to add and `id` to the `iron-ajax` `params` attribute.
        ready: function() {
            this.$.productsajax.params.id = this.categoryid;
       }
    });
})();
</script>

生成的url如下所示:

`http://localhost:3003/api/taxons/products?token=my-token&id=undefined`

该dom-module的categoryid属性不是undefined我可以看到反映在属性正确的属性值,这意味着它是与如何我把它分配给属性.我也尝试了这个created和attached回调,但仍然无法正常工作.

编辑:categoryid在实例化时传递给模块,如下所示:

<products-service products="{{products}}" categoryid="{{categoryid}}"></products-service>

如此处所见,categoryid传递给服务已经有了价值.(图像上的元素名称可能略有不同.我缩短它们以使问题更简洁.)

在category-products-list这里的服务被称为是这样的

<dom-module id="category-products-list">
  <template>
    <category-products-service products="{{products}}" categoryid="{{categoryid}}"></category-products-service>
    <div>
      <template is="dom-repeat" items="{{products}}">
       <product-card on-cart-tap="handleCart" product="{{item}}">
         <img width="100" height="100">
         <h3>{{item.name}}</h3>
         <h4>{{item.display_price}}</h4>
       </product-card>
     </template>
  </div>
</template>

</dom-module>

<script>
 (function() {
  Polymer({
  is: 'category-products-list',

  properties: {
    categoryid: {
      type: String,
      notify: true,
      reflectToAttribute: true
    }
  },

ready: function() {
   //this is undefined too
   console.log("categoryid in the list module: "+categoryid)
   }
   });
   })();
</script>

Answer 1

我认为你在这里遇到了一些问题,需要稍微重新思考一下你的结构.

首先,因为categoryid属性绑定在元素之外,所以它的初始值将是未定义的.基本上,创建并附加元素,运行所有生命周期方法,然后设置categoryid.这也意味着因为你有一个iron-ajaxwith autoset,它最初会尝试使用首先给出的信息发出请求.

我建议的更改:

<dom-module id="products-service">
  <style>
    :host {
      display: none;
    }
  </style>

  <template>
    <iron-ajax id="productsajax"
      url="http://localhost:3003/api/taxons/products"
      params='{"token":"my-token"}'
      method='GET'
      on-response='productsLoaded'
      handleAs='json'>
    </iron-ajax>
  </template>
</dom-module>

<script>
(function() {
    Polymer({
        is: 'products-service',

        properties: {
            categoryid: {
                type: String,
                notify: true,
                reflectToAttribute: true
            }
        },

        observers: [
            // Note that this function  will not fire until *all* parameters
            // given have been set to something other than `undefined`
            'attributesReady(categoryid)'
        ],

        attributesReady: function(categoryid) {
            this.$.productsajax.params.id = categoryid;

            // With the removal of `auto` we must initiate the request
            // declaratively, but now we can be assured that all necessary
            // parameters have been set first.
            this.$.productsajax.generateRequest();
        }
    });
})();
</script>