个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 16:06:57 25 4
gpt4 key购买 nike

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

我有两个自定义元素(如下)，我想绑定(bind)来自 <iron-ajax> 的响应进入 pagination_options 的属性 ( a-pagination ) 。在 a-pagination ，如果我使用 console.log 检查属性值, pagination_options始终记录为 undefined 。我绑定(bind)的另一个属性 ( 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"
  }
}

最佳答案

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

相反，您应该使用 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

关于javascript - 将iron-ajax响应绑定(bind)到嵌套元素的属性中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41792031/

25 4 0
文章推荐： css - 水平显示 UL 列表
文章推荐： c++ - 为什么这段代码在赋值运算符之后调用了拷贝构造函数？
文章推荐： css - div内容对齐查询
文章推荐： c++ - 如何计算连续出现两次的字符
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com