javascript - 为什么这个 polymer 元素的属性解析为未定义？

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 因为我可以看到正确的属性值反射(reflect)在属性上，这意味着它与如何将其分配给属性有关。我还在 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 属性绑定(bind)在您的元素之外，所以它的初始值将是未定义的。基本上，您的元素已创建并附加，所有生命周期方法都会运行，然后 categoryid 会被设置。这也意味着，因为您有一个设置了 auto 的 iron-ajax，它最初会尝试使用首次提供的信息发出请求。

我建议的更改:

<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>