Полиморфные данные, привязанные к тексту из моментального снимка Firebase

Question

Я работаю над проектом, который использует Firebase Authentication и <firebase-query> от элементов polymerfire. Я использую привязку данных во многих местах по всему моему приложению и никогда не сталкивался с этой проблемой.

Я связываю объект пользователя, который был создан при аутентификации пользователя во многих местах, чтобы получить имя моих пользователей. Следующий код показывает пользовательский элемент. Там я пытаюсь связать, кроме объекта пользователя, моментальный снимок Firebase с свойством типа Object.

Когда я console.log() имущество vidobj, он отображает весь объект. Однако я не могу привязать его к тексту. Хотя, то же самое работает и для свойства объекта пользователя.

Я считаю, что это имеет какое-то отношение к жизненному циклу в Полимере. Если свойство не обновляется автоматически, даже если значение может быть создано позже?

На следующем снимке экрана отображает два console.log 's с содержанием vidobj:

<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

контекст вашего Firebase CallBack является не связан с вашим объектом Polymer, так что вы' re фактически устанавливает 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) 
); 
}