Firebaseスナップショットからのテキストへのポリマーデータのバインド

Question

私はpolymerfire要素のFirebase認証と<firebase-query>を使用するプロジェクトに取り組んでいます。私は、アプリケーション全体の多くの場所でデータバインディングを使用していますが、この問題は発生しませんでした。

私はユーザーが認証されたときに作成されたユーザーオブジェクトを、多くの場所でバインドしてユーザーの名前を受け取ります。次のコードはカスタム要素を示しています。ここでは、ユーザオブジェクトのほかにFirebaseのスナップショットを、タイプObjectのプロパティにバインドしようとしています。

console.log()vidobjプロパティの場合、オブジェクト全体が表示されます。しかし、私はそれを私のテキストに縛ることができません。ただし、同じことがユーザーオブジェクトのプロパティで機能します。

これはPolymerのライフサイクルと関係があると私は信じています。値は後で作成されても自動的に更新されませんか？

次のスクリーンショットは、2 console.log表示「vidobjの内容との を：あなたのFirebaseコールバックのコンテキストは、あなたのポリマーのオブジェクトにバインドされていない

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

<dom-module id="my-singlevideo"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 

    <firebase-auth user="{{user}}"></firebase-auth> 
    <iron-localstorage 
     id="localstorage" 
     name="my-app-storage" 
     value="{{localUserDetails}}"> 
    </iron-localstorage> 

    <h1>Name: [[user.displayName]]</h1> 
    <h1>Video Title: [[vidobj.title]]</h1> 

    </template> 

    <script> 
    Polymer({ 
    is: 'my-singlevideo', 

    properties: { 
     user: { 
     type: Object, 
     }, 
     localUserDetails: { 
     type: Object, 
     }, 
     vidobj: { 
     type: Object, 
     }, 
    }, 

    ready: function() { 

     this.$.localstorage.reload(); 
     var videoId = this.localUserDetails.lastClickedVid; 

     firebase.database().ref('/videos/' + videoId).once('value', function(snapshot) { 
     this.vidobj = snapshot.val(); 
     console.log(this.vidobj); 
     console.log(this.vidobj.title); 
     }); 
    }, 

    }); 
</script> 
</dom-module> 

Answer 1

ので、あなた」実際にvidobjを外側のコンテキスト（通常Windowオブジェクト）に設定し直してください。この問題を解決するには

、このようFunction#bindを使用します。

ready: function() { 
    // ... 
    firebase.database().ref('/videos/' + videoId).once('value', 
    function(snapshot) { 
     this.vidobj = snapshot.val(); 
     console.log(this.vidobj); 
     console.log(this.vidobj.title); 
    }.bind(this) 
); 
}