Bind iron-ajax response into nested element's property

Question

I have the same problem as this question: " Polymer How to pass returned iron-ajax string into another polymer element ", but the answer didn't solve my problem.

I have two custom elements (below), and I want to bind the response from <iron-ajax> into a property ( pagination_options ) of a-pagination . In a-pagination , if I check the property value using console.log , pagination_options is always logged as undefined . Another property I'm binding ( url ) is always populated. Why is pagination_options undefined?

table-list element :

<dom-module id="table-list">
    <link rel="stylesheet" href="table-list.css" />
    <template>
        <iron-ajax url=[[url]] last-response={{response}} params=[[params]] auto></iron-ajax>
         <template is="dom-repeat" items="{{response.data}}" as="item">
            <div>[[item.content]]</div>
         </template>
        <a-pagination url=[[url]] pagination_options={{response.pagination}}></a-pagination>
    </template>
    <script>
       Polymer({
          is: "table-list",
          properties: {
            url: String,
            params: Object
          }
       });
    </script>
</dom-module>

a-pagination element :

<dom-module id="a-pagination">
    <script>
       Polymer({
        is: "a-pagination",
        properties: {
          url: String,
          pagination_options: Object
        },
        ready: function(){
          console.log(this.url);
          console.log(this.pagination_options);
        }
       });
    </script>
</dom-module>

Usage:

<table-list url="http://localhost/api/v1/article" params='{"page": 1}'></table-list>

Example AJAX response:

{
  "status": "success",
  "data": [{
    "id":  "1",
    "content": "content 1"
  },
  {
    "id":  "2",
    "content": "content 2"
  }],
  "pagination": {
    "total_page": 1,
    "per_page": 10,
    "current_page": "1"
  }
}

Answer 1

In this case, the ready lifecycle event always occurs before the AJAX response event, so when you log the property in ready() , you're actually logging the initial value of pagination_options (which is undefined ).

Instead, you should use an observer like this:

Polymer({
  is: 'a-pagination',

  observers: ['_paginationChanged(pagination_options)'],

  _paginationChanged: function(pagination_options) {
    console.log(pagination_options);
  },
  //...
});

 HTMLImports.whenReady(() => { Polymer({ is: "table-list", properties: { url: String, params: Object }, ready() { // fill response asynchronously to simulate AJAX event this.async(() => { this.response = { "status": "success", "data": [{ "id": "1", "content": "content 1" }, { "id": "2", "content": "content 2" }], "pagination": { "total_page": 1, "per_page": 10, "current_page": "1" } }; }, 1000); } }); Polymer({ is: "a-pagination", properties: { url: String, pagination_options: Object }, observers: [ '_paginationChanged(pagination_options)' ], ready() { // Don't log `pagination_options` in the `ready` // callback, since the AJAX request that fills // it might not yet have occurred, and the // resulting data bindings might not yet have // taken effect. Use observers instead. console.log('ready(): url', this.url); console.log('ready(): pagination_options', this.pagination_options); }, _paginationChanged(pagination_options) { console.log('_paginationChanged(): pagination_options', pagination_options); } }); });

 <head> <base href="https://polygit.org/polymer+1.7.1/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <div>See console log</div> <table-list url="http://httpbin.org/get"></table-list> <dom-module id="table-list"> <link rel="stylesheet" href="table-list.css" /> <template> <iron-ajax url=[[url]] last-response={{response}} params=[[params]]></iron-ajax> <template is="dom-repeat" items="{{response.data}}" as="item"> <div>[[item.content]]</div> </template> <a-pagination url=[[url]] pagination_options={{response.pagination}}></a-pagination> </template> </dom-module> </body>

codepen

Bind iron-ajax response into nested element's property

Question

1 answers

solution1
1 ACCPTED 2017-01-22 22:27:43

Bind iron-ajax response into nested element's property

Question

1 answers

solution1 1 ACCPTED 2017-01-22 22:27:43

solution1
1 ACCPTED 2017-01-22 22:27:43