サーバーからデータを取得し、ポリマー要素で使用します。

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呼び出しで取得したデータを持つ要素内部の仲間、内部ネットワークと内部の文字をレンダリングですこのエレメント内のdom-repeatテンプレートを使用して、データ内の配列をレンダリングします。

私がここで添付するコードの問題は、データが取得される前にDOMに要素が登録されていることです。

必要に応じて、私は情報を添付したり提供したりすることができます。

よろしくお願いいたします。

Answer 1

あなたのコードを持ついくつかの問題があります。

1. 使用鉄AJAXの代わりに、jQueryの：として外部ライブラリを使用すると、それ自体は何の問題ではないのに対し、鉄 - AJAXを使用すると、あなたのコードを簡素化することができ、多く
2. @ a1626成功ハンドラ内のがここで使用したいPolymerオブジェクトではありません
3. あなたの更新コード（this.userData = msg;）は、Polymerにオブジェクトの更新を強制しません。代わりにthis.set('userData', msg);を使用してください。
4. 実際にサブノードに問題がある場合は、データがない状態で非表示にします。