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

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;
         }
       });
     }
   });
 })();

我想要做的是使用 ajax 调用中检索到的数据呈现元素 internal-associates、internal-networks 和 internal-letter，以便使用 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

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

Get data from server and use it in polymer element

data-binding

ajax

polymer

polymer-1.0

polymer-starter-kit