Javascript 将iron ajax响应绑定到嵌套元素'；s属性

我的问题和这个问题一样：，但答案并没有解决我的问题

我有两个自定义元素（如下），我想将

的响应绑定到

a-pagination

的属性（

pagination_options

）中。在

a-pagination

中，如果我使用

console.log

检查属性值，则

pagination_选项

始终记录为

未定义

。我正在绑定的另一个属性（

url

）总是被填充。为什么

pagination_options

未定义

表格列表

元素：

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

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

---

在这种情况下，

ready

生命周期事件总是发生在AJAX响应事件之前，因此当您在

ready（）

中记录属性时，实际上是在记录

分页选项的初始值（即
未定义的
）

相反，您应该使用这样的方法：

Polymer({
  is: 'a-pagination',

  observers: ['_paginationChanged(pagination_options)'],

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


HTMLImports.whenReady（（）=>{
聚合物({
是：“表格列表”，
特性：{
url:String，
参数：对象
},
就绪（）{
//异步填充响应以模拟AJAX事件
这是一个.async（（）=>{
此响应={
“状态”：“成功”，
“数据”：[{
“id”：“1”，
“内容”：“内容1”
}, {
“id”：“2”，
“内容”：“内容2”
}],
“分页”：{
“总页数”：1，
“每页”：10，
“当前页面”：“1”
}
};
}, 1000);
}
});
聚合物({
是：“a-分页”，
特性：{
url:String，
分页选项：对象
},
观察员：[
“_分页已更改（分页选项）”
],
就绪（）{
//不要将“分页选项”记录在“就绪”中`
//回调，因为
//它可能还没有发生，而
//生成的数据绑定可能尚未完成
//已生效。请改用观察员。
log（'ready（）：url'，this.url）；
log（'ready（）：pagination_options'，this.pagination_options）；
},
_分页更改（分页选项）{
log（'u paginationChanged（）：pagination_options'，pagination_options）；
}
});
});

请参阅控制台日志
[[item.content]]
谢谢@tony19，很好用。。我会看那个文档。@itx没问题：）麻烦您了，我有新问题，您能帮我吗？：）
Polymer({
  is: 'a-pagination',

  observers: ['_paginationChanged(pagination_options)'],

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