2016-12-25 5 views
10

Code:Wie ordne ich chronologisch Daten in meiner Firebase infinite scroll?

<script> 

    var app = angular.module('app', ['firebase']); 

    app.controller('ctrl', function ($scope, $firebaseArray, $timeout) { 


      console.log(<%=lastID%>); 

      $scope.data = []; 
      var _n = Math.ceil(($(window).height() - 50)/(350)) + 1; 
      var _start = <%= lastID %>; 
      var _end = <%= lastID %> + _n - 1; 

      $scope.getDataset = function() { 

       fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) { 

        $scope.data.push(dataSnapshot.val()); 
        $scope.$apply() 
        console.log("THE VALUE:"+$scope.data); 

       }); 

       _start = _start + _n; 
       _end = _end + _n; 

      }; 


      $scope.getDataset(); 

      window.addEventListener('scroll', function() { 
       if (window.scrollY === document.body.scrollHeight - window.innerHeight) { 
         $scope.$apply($scope.getDataset()); 
       } 
      }); 

    }); 

    // Compile the whole <body> with the angular module named "app" 
    angular.bootstrap(document.body, ['app']); 


</script> 

LAGE:

lastID ist die ID des letzten Beitrag erstellt. Sie gehen rückwärts (von -1 bis lastID).

Diese Lösung funktioniert einwandfrei, außer wenn einige Posts gelöscht werden.

(Beiträge sind von der neuesten zu ältesten (von lastID bis -1)) bestellt.

Zum Beispiel, wenn es 16 Posts gibt, lastID = -16.

Wenn ich die Posts -13 bis -5 und Post-3 lösche, bleibt lastID bei -16.

Das bedeutet, dass beim Laden der Seite keine Posts erscheinen, nachdem die ersten drei Posts (-16 bis -14) geladen sind und ich mehrmals blättern muss, um Post -4 zu erhalten.


FRAGE:

Wie kann ich sicherstellen, dass, wenn einige Beiträge gelöscht werden, meine unendliche Scroll-Skript die IDs der inexisting Beiträge überspringen wird und laden nur die drei am nächsten Beiträge?


WAS ICH üBERPRüFTE:

ich ausgesehen:

Display posts in descending posted order

Aber ich bin nicht sicher, wie ich diese Lösungen in meinem unendlichen Scroll implementieren würde. Irgendwelche Ideen ?

Antwort

2

Wenn ich Sie richtig verstanden habe, müssen Sie nicht Ende verwenden. Dies könnte erreicht werden mit startAt + Limit

fb.orderByChild('id').startAt(_start).limit(n)... 

Und verwenden Sie ein Layout, um Elemente absteigend zu bestellen. Mit diesem müssen Sie über Folge von ids keine Sorge, wenn sie

UPDATE aufeinander folgend sind

Sie dies tun können, noch einfacher. Aktualisieren Sie einfach Ihren Start mit einem letzten Wert

fb.orderByChild('id').startAt(_start).limit(_n).on("child_added", function(dataSnapshot) { 

    $scope.data.push(dataSnapshot.val()); 
    $scope.$apply() 
    _start = dataSnapshot.child('id').val() 
    console.log("THE VALUE:"+$scope.data); 

}); 

In diesem Fall Ihre _start wird die letzte id immer halten und Sie können nicht über gelöschte Elemente sorgen. Alternativ können Sie eine temporäre Variable verwenden, um den letzten ID-Wert zu speichern und in startAt

+0

Ihre Argumentation ist solide und die drei Elemente werden geladen, wenn ich zum Beispiel -2, -3 und -5 in einer Liste von -1 bis -6 lösche. Problem ist: seit wir das EndeAt() entfernt haben, kann ich ein zweites Mal scrollen und -2 und -3 werden wieder geladen. In der Tat, lastID = -6 für den ersten Datensatz, aber lastID = -3 für den ersten Bildlauf und letzte ID = 0 für den zweiten Bildlauf. – Coder1000

+0

Ich müsste die ID des zuletzt geladenen Elements abrufen und _start darauf setzen. Aber wie kann ich das letzte Element innerhalb meiner Firebase-Bestellfunktion auswählen? – Coder1000

+0

@ Coder1000 Bitte schauen Sie auf meine Antwort aktualisiert –

1

zu verwenden. Grundsätzlich sind alle in Firebase gespeicherten Daten chronologisch geordnet, da die automatisch generierte ID für jeden Datensatz auf dem Zeitstempel basiert. Daher müssen Sie Ihre Werte nicht bestellen.Stellen Sie nur sicher, dass Sie eine neue ID in dem Schlüsselwertpaar hinzufügen, das in Firebase gespeichert wird.

Falls Sie die Reihenfolge der Liste rückgängig zu machen (was die jüngsten Aufzeichnungen am oberen Rand angezeigt), müssen Sie die Liste nach dem Lesen sie rückgängig zu machen.

EDIT

Wenn Sie die Position Ihrer Datensatz in der Datenbank erhalten möchten, können Sie etwas Ähnliches wie die folgenden verwenden:

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs"); 
ref.orderByKey().on("child_added", function(snapshot) { 
    console.log(snapshot.key() + " was " + snapshot.val().height + " meters tall"); 
}); 

Sie können über die Bestellung here weitere Informationen finden.

+0

ich Ihre Argumentation verstehen und ich habe darüber nachgedacht, aber die Antworten mit dieser Lösung verwende mehr Code als den, den ich gerade nutze.Ich sehe keinen großen Vorteil, außer dass ich keine zusätzlichen IDs in meinen Posts in der Datenbank speichern muss.oder gibt es einen wichtigen Vorteil für diesen Ansatz, von dem ich nichts weiß? . – Coder1000

+0

er Tatsache, dass Sie die IDs nicht speichern müssen, da diese automatisch generiert werden, ist bereits ein Plus Alles was Sie tun müssen, ist die folgende Codezeile hinzu, wenn ein Datensatz eingefügt: 'var newPostRef = postsRef.push(); 'Dies wird automatisch eine ID Basis eines Ihres Zeitstempel im Moment erzeugen. –

+0

ich weiß ^^. Aber ist das wirklich der einzige Vorteil dieser Lösung? – Coder1000

1

startAt und limitToFirst kann verwendet werden nächsten Beiträge abzurufen.

Sagen Sie Firebase, um nach id der zuletzt geladenen Post (start + 1 in diesem Fall) zu starten, und gelöscht id wird automatisch übersprungen.

var itemsPerScroll = 1; 
$scope.getDataset = function() { 
    var start = $scope.data.slice(-1)[0].id 
    fb.orderByChild('id').startAt(start + 1).limitToFirst(itemsPerScroll) 
    .on("child_added", function(dataSnapshot) { 
    $scope.data.push(dataSnapshot.val()); 
    $scope.$apply() 
    }) 
} 
+0

Das Problem mit dieser Antwort ist, dass die IDs in Firebase nicht inkrementell sind ... – m1crdy

Verwandte Themen