Question

我很感激帮助我尝试用Polymer做些什么。我有一个元素：

<dom-module id="internal-content">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
    <style>
      internal-menu{
        width: 20%;
        height: 100%;
      }
      internal-associates, internal-networks, internal-letter, internal-help{
        width: 80%;
        height: 100%;
      }
    </style>

    <div class="horizontal center layout">
      <internal-menu></internal-menu>

      <internal-associates id="internal-associates" data="{{userData.associates}}"></internal-associates>
      <internal-networks id="internal-networks" data="{{userData.socialNetworks}}" style="display: none"></internal-networks>
      <internal-letter id="internal-letter" data="{{userData.farewellLetter}}" style="display: none"></internal-letter>
      <internal-help id="internal-help" style="display: none"></internal-help>
    </div>

    <paper-toast-error id="errorInServer"
  text="Ha habido un problema en servidor al acceder a sus datos. Por favor, vuelva a intentarlo. Si el error persiste póngase en contacto con nosotros
  a través del email v.punzano@gmail.com">
    </paper-toast-error>

  </template>
<script>
  (function() {
    'use strict';
    Polymer({
      is: 'internal-content',
      properties: {
        userData: {
          type: Object
        }
      },

      ready: function(){
       $.ajax({
         type: "GET",
         url: "/getUserData",
         data: {firebaseID: document.querySelector('#firebaseLogin').user.uid},
         error: function(xhr, ajaxOptions, thrownError){
           document.querySelector('#errorInServer').openToast();
         },
         success: function(msg) {
           this.userData = msg;
           // return msg;
         }
       });
     }
   });
 })();

我想要做的是将元素internal-associates，internal-networks和internal-letter与ajax调用中检索到的数据一起呈现，以便在此元素中使用dom-repeat模板来渲染数组内的数组。数据

我在这里附加的代码的问题是在检索数据之前元素已经在DOM中注册。

如果需要，我可以附加或提供更多信息。

提前致意并表示感谢。

Answer 1

您的代码存在以下问题：

使用iron-ajax而不是jquery：使用外部库本身没有问题，使用iron-ajax可以大大简化你的代码
正如@ a1626所指出，成功处理程序中的this不是您希望在此处使用的Polymer对象
您的更新代码（this.userData = msg;）不会强制Polymer更新对象。请改用this.set('userData', msg);。
如果您的子节点确实存在问题，请在您没有任何数据时隐藏它们。请参阅https://www.polymer-project.org/1.0/docs/devguide/templates#dom-if

从服务器获取数据并在聚合物元素中使用它

1 个答案: