Question

GOOD SOLUTION HERE

在下面的情况下，我尝试从一个位置获取数据，然后在不同位置(the firebase joins)查找相关数据。

我能够检索适当的数据并显示在我的控制台中，但是当我将它们存储在我的一个属性中时，我会陷入困境，然后使用dom-repeat模板循环它们。此外，我不完全确定是否应该使用平面JavaScript或PolymerFire组件。

      //Key value for a course that I retrieved from a URL Query
      var ckey = KSH456YU789;

      //Get the Videos that belong to that course key
      firebase.database().ref('/courseVideos/' + ckey).on('child_added', snap => {

        //Get the video data of each video that belongs to the course
        let videoRef = firebase.database().ref('videos/' + snap.key);
        videoRef.once('value', function(snapShot) {
          this.set('courseVidObj', snapShot.val());
          //console.log() the data works
          console.log(this.courseVidObj);
        }.bind(this));

      });

从上面可以看出，我能够记录存储在我的属性＆＃39; courseVidData＆＃39;中的数据。它来自Array类型。但是，这将针对每个基本覆盖先前存储值的请求运行。这使得无法在dom-repeat模板中使用我的属性。如下图所示：

   <template is="dom-repeat" items="[[courseVidData]]" as="vid">

    <my-card
      card-img="[[vid.img]]"
      card-name="[[vid.title]]"
      card-text="[[vid.description]]"
      card-key="[[vid.$key]]">
    </my-card>

  </template>

第二次尝试

在我的第二次尝试中，我使用forEach（）将返回的数据存储在一个数组中，然后我将其添加到我的＆＃39; courseVidData＆＃39;属性。
这将返回一个包含三个对象的数组。不幸的是，dom-repeat什么也没做。

       firebase.database().ref('/courseVideos/' + ckey).once('value', function(snap) {
        var vidData = [];
        snap.forEach(function(childSnapshot) {
          let videoRef = firebase.database().ref('videos/' + childSnapshot.key);
          videoRef.once('value', function(snapShot) {
          vidData.push(snapShot.val());
          this.courseVidData = vidData;
          console.log(this.courseVidData); //returns array with the object's
          }.bind(this));
        });
      });

Answer 1

所以我在阅读了Polymer Template repeater (dom-repeat)的文档以及在Polymer中处理数组的方式后，找到了一种方法。

这可能不是最干净的方法，但它现在有效。如果有人指出可以改进的地方，我很乐意改变我的答案或接受另一个答案。

      //Retrieve course videos and their details
      firebase.database().ref('/courseVideos/' + ckey).on('child_added', snap => {
        let videoRef = firebase.database().ref('videos/' + snap.key);
        videoRef.once('value', function(snapShot) {

          if (!this.courseVidData) this.set('courseVidData', []);
          this.push('courseVidData', {video: snapShot.val()});

        }.bind(this));
      });

我无法解释原因，但我必须添加一个if语句来检查数组，如果不存在则设置它。然后我将我的快照的值放在'courseVidData'属性中，该属性在我的属性和类型Array中声明因为每个返回对象的键现在都是“视频”，所以必须使用[[item.video.title]]来访问对象值（下面的代码）。

      <template is="dom-repeat" items="[[courseVidData]]">

       <h1>[[index]]</h1>
       <h1>[[item.video.title]]</h1>

      </template>

<强>更新
虽然此方法有效，但Firebase创建的唯一键会在数组中丢失。为了保留每个对象的密钥，我将密钥和对象存储在另一个对象中，并将其附加到我的数组中我知道这不漂亮，如上所述，我仍在寻找更好的解决方案。然而，作为一个血腥的初学者，它为我提供了诀窍。

       firebase.database().ref('/courseVideos/' + ckey).on('child_added', snap => {
         let videoRef = firebase.database().ref('videos/' + snap.key);
         videoRef.once('value', function(snapShot) {
           var vidKeyObj = {key:snapShot.key, value:snapShot.val()};
           if (!this.courseVidData) this.set('courseVidData', []);
           this.push('courseVidData', {video: vidKeyObj});
       }.bind(this));

使用Polymer Properties连接Firebase数据库

1 个答案: