8

我正在尝试将属性动态分配给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的正确属性值，这意味着它与如何将其分配给属性有关。我也在和回调上尝试过这个，但仍然无法正常工作。categoryidundefinedcreatedattached

编辑：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>
4

3 回答 3

6

我认为您在这里遇到了一系列问题，需要稍微重新考虑您的结构。

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

我建议的更改：

<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>
于 2015-06-09T20:30:20.000 回答
0

问题是您如何将 categoryid 传递给 products-service ......这不是 products-service 元素本身的问题。如果你这样做<products-service categoryid="5"></products-service>，它将起作用。显然，您的应用程序要复杂得多，但我创建了一些可以正常工作的简单元素：

索引.html：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<title>My Test</title>

<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">    </script>

<link rel="import" href="elements/product-list.html">

</head>

<body>
  <product-list categoryid="5"></product-list>
</body>

</html>

产品列表.html：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../elements/product-service.html">


<dom-module id="product-list">
<style>

</style>

<template>
<product-service categoryid="{{categoryid}}"></product-service>
</template>
</dom-module>

<script>
Polymer({
    is: 'product-list'
});
</script>

产品服务.html：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">


<dom-module id="product-service">
<style>

</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>
Polymer({
    is: 'product-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() {
console.log(this.categoryid);
this.$.productsajax.params.id = this.categoryid;
},
productsLoaded: function(e) {
console.log('Response');
}

});
</script>
于 2015-06-09T21:08:36.733 回答
0

Zikes 诊断是正确的，返回 undefined 的原因是页面生命周期在数据加载到页面之前完成。但是，我无法得到他的答案来为我的解决方案工作。（可能是我的错误，某处。）我的 api 也使用查询字符串来传递数据，而你的并没有这样做，我相信这个答案对像我一样遇到这种情况的任何人都有帮助。为了解决这个问题，我在我的财产中添加了一个观察者，我的答案来自https://www.polymer-project.org/1.0/docs/devguide/observers。我使用了简单的观察者。我相信 Zikes 使用的是复杂的。 

<iron-ajax id="productsajax" url= {{ajaxUrl}} method='GET'
      on-response='productsLoaded' handleAs='json'>
</iron-ajax>

Polymer({
    is: 'product-service',
    properties: {
            categoryid: {
                type: String,
                notify: true,
                reflectToAttribute: true,
                observer: 'catIdReady'
            },
            ajaxUrl: {
                type: String,
                notify: true
            }
    },
    catIdReady: function (catidnew, catidold) {
        this.set('ajaxUrl', this._getAjaxUrl());
        this.$.productsajax.generateRequest();
        console.log("catidReady!" + catidnew);
    },
    _getAjaxUrl: function () {
        console.log(this.categoryid);
        return 'http://localhost:3003/api/taxons/products?categoryId=' + 
        this.categoryid;
    },

于 2017-05-10T13:51:54.090 回答