CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13827

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

I'm trying to pass parameter of app-route to custom element gone undefined. I can display that parameter in file but in custom element, it gone undefined. Following is my code and please help me to check how to fix it. Thanks.

In custom element file, getid gone undefined.

My File

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

Custom element

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

Upvotes: 0

Views: 439

Answers (1)

tony19
tony19

Reputation: 138336

The data binding effects for getid and geturl happen after the ready callback, so that's not where you'd want to manipulate those properties.

Instead, you should use a complex observer to observe getid and geturl. This observer would only be called when both properties are defined and changed (this behavior changes slightly in Polymer 2.0).

You should remove the changes from ready, and add the complex observer like shown here:

Polymer({
  ...

  properties: { ... },

  observers: ['_generateRequest(geturl, getid)'],

  _generateRequest: function(geturl, getid) {
    if (geturl && getid) {
      this.$.ajaxData.url = geturl + getid;
      this.$.ajaxData.generateRequest();
    }
  }
);

Upvotes: 1

Related Questions