Polymer 1.0 数据绑定和访问 ajax 响应对象

Question

我是 Polymer 的新手，我正在尝试创建接受请求并发回响应的自定义服务。但是，即使我可以在服务页面中看到正在设置该对象，我仍面临访问响应对象的问题。

请看服务代码：x-custom.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">

<dom-module id="x-custom">
<style>
</style>
<template>
<iron-ajax
      id="ajax"
      url=""
      handle-as="json"
      on-response="hresponse"
      debounce-duration="300">
</iron-ajax>

</template>
<script>

  Polymer({

    is: 'x-custom',
 properties: {
      user: String,
      responseData:{
        type:Object,
        notify:true
      }

     },

attached: function() {
      this.$.ajax.url = "http://myapitesing/api/users/"+this.user;
      this.$.ajax.generateRequest();
    },

  hresponse: function(request) {
        // Make a copy of the loaded data
        respObj = request.detail.response; 
        if(respObj){
          //console.log(respObj);
          this.responseData = respObj;
          alert(respObj.email);
        }
      }

  });

</script>
</dom-module>

现在查看访问服务的元素：user-details.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="x-custom.html">

<dom-module id="user-details">
    <style>

    </style>

<template>
    
        <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" responseData={{responseData}} ></x-custom> 
           
           <h1>{{responseData.email}}</h1>
           
</template>
    <script>
       Polymer({
                is: 'user-details'
          });
    </script>
</dom-module>

现在我按以下方式调用 idex.html 中的用户详细信息元素

<user-details></user-details>

它成功获取了详细信息，但是，{{responseData.email}} 没有在用户-details.html 页面中显示电子邮件字符串。

如果我尝试在 x-custom.html 页面中获取相同的值，我可以看到 responseData.email 值。（请参阅 x-custom.html 中 hresponse 函数中的警报）

请帮助我，如果我遗漏了什么地方请告诉我。

Answer 1

如果您尝试通过从其他自定义元素扩展来获取数据，则 Polymer 1.0 目前不支持扩展自定义元素。您可以在 link 的文档中找到它： https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#type-extension

Answer 2

注意我没有对你的元素进行测试，但我猜你的问题出在你的 <user-details> 行：

    <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" responseData={{responseData}} ></x-custom>

除非这是一个拼写错误，否则它肯定不会绑定到 responseData，因为您的属性是驼峰式的。你需要做的：

    <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" response-data={{responseData}} ></x-custom>

您可能还需要使 responseData in <x-custom> 成为属性 with notify: true；我总是忘记。

Polymer 1.0 数据绑定和访问 ajax 响应对象

Polymer 1.0 Data binding and accessing ajax response object

html

javascript

json

polymer-1.0