Question

我遇到与此问题相同的问题：＆＃34; Polymer How to pass returned iron-ajax string into another polymer element＆＃34;，但答案并没有解决我的问题。

我有两个自定义元素（下方），我想将<iron-ajax>的响应绑定到pagination_options的属性（a-pagination）。在a-pagination中，如果我使用console.log检查属性值，则pagination_options始终记录为undefined。我总是填充我绑定的另一个属性（url）。为什么pagination_options未定义？

table-list元素：

<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元素：

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

用法：

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

AJAX响应示例：

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

在这种情况下，ready生命周期事件始终发生在AJAX响应事件之前，因此当您在ready()中记录该属性时，您实际上记录的初始值为{{1 （pagination_options）。

相反，你应该使用这样的observer：

undefined

＆＃13;

Polymer({
  is: 'a-pagination',

  observers: ['_paginationChanged(pagination_options)'],

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

＆＃13;

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);
    }
  });
});

＆＃13;

codepen

将iron-ajax响应绑定到嵌套元素的属性中

1 个答案: