聚合物将app-route的数据传递给未定义的自定义元素

Polymer pass data of app-route to custom element gone undefined

本文关键字：未定义 自定义 元素 app-route 数据 聚合物      更新时间：2023-09-26

我试图将app-route的参数传递给未定义的自定义元素。我可以在文件中显示这个参数但在自定义元素中，它没有定义。以下是我的代码，请帮我检查一下如何修复谢谢。

在自定义元素文件中，getid gone undefined.

我的文件
<app-route
    route="[[route]]"
    pattern="/:slug/:id"
    data="{{routeData}}"></app-route>
    <!-- display correctly -->
    [[routeData.id]]
<myelement-http-get
    id="getCategoryData"
    getid="[[routeData.id]]"
    geturl="http://localhost:9000/polymer/category/"
    jsonobject="{{jsonobject}}"
    failure="{{failure}}"></myelement-http-get>

自定义元素

<script>
  Polymer({
      is: 'myelement-http-get',
      properties: {
        geturl: String,
        getid: String,
        jsonobject: {
          type: Object,
          notify: true
        },
        failure: {
          type: Boolean,
          notify: true,
          readOnly: true
        }
      },
      ready: function () {
        /* undefined found this.getid */
        this.$.ajaxData.url = this.geturl + this.getid;
        this.$.ajaxData.generateRequest();
      },
      handleResponse: function (data) {
        this.jsonobject = data.detail.response;
      }
  });
</script>

getid和geturl的数据绑定效果发生在 ready回调之后，所以这不是您想要操作这些属性的地方。

相反，您应该使用一个复杂的观察者来观察getid和geturl。这个观察者只有在定义和改变属性时才会被调用(这种行为在Polymer 2.0中略有改变)。

您应该从ready中删除更改，并添加复杂的观察者，如下所示:

Polymer({
  ...
  properties: { ... },
  observers: ['_generateRequest(geturl, getid)'],
  _generateRequest: function(geturl, getid) {
    if (geturl && getid) {
      this.$.ajaxData.url = geturl + getid;
      this.$.ajaxData.generateRequest();
    }
  }
);
相关文章：