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

【问题标题】：Bind iron-ajax response into nested element's property将 iron-ajax 响应绑定到嵌套元素的属性中
【发布时间】：2017-01-22 14:22:49
【问题描述】：

我和这个问题有同样的问题：“Polymer How to pass returned iron-ajax string into another polymer element”，但是答案并没有解决我的问题。

我有两个自定义元素（如下），我想将来自<iron-ajax> 的响应绑定到a-pagination 的属性（pagination_options）中。在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"
  }
}

【问题讨论】：

标签： javascript polymer polymer-1.0

【解决方案1】：

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

相反，您应该像这样使用observer：

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

【讨论】：

感谢@tony19，这行得通。我会阅读该文档。
@itx 没问题 :)
打扰了，我有新问题here你能帮帮我吗？ :)