以降序显示帖子

IT技术 javascript firebase
2021-02-08 12:34:18

我正在尝试测试 Firebase 以允许用户使用push. 我想用以下内容显示我检索的数据;

fbl.child('sell').limit(20).on("value", function(fbdata) { 
  // handle data display here
}

问题是数据是按从旧到新的顺序返回的 - 我希望以相反的顺序返回。Firebase 可以做到这一点吗?

6个回答

自从编写此答案以来,Firebase 添加了一项功能,允许按任何子项或值进行排序。所以现在有四种排序数据的方法:按键、按值、按优先级或按任何命名子项的值。请参阅介绍新订购功能的这篇博文

但基本方法保持不变:

1. 添加一个带有反向时间戳的子属性,然后对其进行排序。

2. 以升序读取子项,然后在客户端反转它们。

Firebase 支持通过两种方式检索集合的子节点:

  • 按名字
  • 按优先级

你现在得到的是名字,这恰好是按时间顺序排列的。顺便说一句,这并非巧合:当您将push一个项目放入集合中时,会生成名称以确保以这种方式对子项进行排序。引用Firebase 文档push

push() 生成的唯一名称以客户端生成的时间戳为前缀,以便结果列表按时间顺序排序。

关于有序数据Firebase 指南对这个主题有这样的说法:

数据的排序方式

默认情况下,Firebase 节点上的子节点按名称按字典顺序排序。Usingpush()可以生成按时间顺序自然排序的子名称,但许多应用程序需要以其他方式对其数据进行排序。Firebase 允许开发人员通过为每个项目指定自定义优先级来指定列表中项目的顺序。

获得所需行为的最简单方法是在添加项目时还指定始终降低的优先级:

var ref = new Firebase('https://your.firebaseio.com/sell');
var item = ref.push();
item.setWithPriority(yourObject, 0 - Date.now());

更新

您还必须以不同的方式检索孩子:

fbl.child('sell').startAt().limitToLast(20).on('child_added', function(fbdata) {
  console.log(fbdata.exportVal());
})

在我的测试中 usingon('child_added'确保添加的最后几个孩子以相反的时间顺序返回。on('value'另一方面,使用按名称的顺序返回它们。

请务必阅读“读取有序数据”部分,其中解释了child_*事件用于检索(有序)子项的用法

一个展示这一点的垃圾箱:http : //jsbin.com/nonawe/3/watch?js,console

这种setWithPriority方法对我很有用。请务必先清除所有现有数据,否则可能会由于与现有优先级值冲突而出现问题。
2021-04-09 12:34:18

从 firebase 2.0.x 开始,您可以使用它limitLast()来实现:

fbl.child('sell').orderByValue().limitLast(20).on("value", function(fbdataSnapshot) { 
  // fbdataSnapshot is returned in the ascending order
  // you will still need to order these 20 items in
  // in a descending order
}

这是公告的链接:Firebase 中的更多查询功能

Mygod 感谢 prepend 正是我想要的。保存进行额外的排序 + 追加。
2021-03-13 12:34:18
除了limitLast(n),我们还需要对数据进行排序。在 angular 的情况下,这可以使用 orderBy 过滤器以基于日期字段的降序来完成,如 ng-repeat="item in ctrl.items | orderBy:'-timestamp'" -timestamp 反转顺序
2021-03-24 12:34:18
代替append,您可以使用prepend以相反的顺序添加项目。
2021-04-09 12:34:18

为了增加弗兰克的答案,还可以通过简单地使用endAt().limit(x)这样的方式来获取最新的记录——即使你没有费心使用优先级对它们进行排序demo

var fb = new Firebase(URL);

// listen for all changes and update
fb.endAt().limit(100).on('value', update);

// print the output of our array
function update(snap) {
   var list = [];
    snap.forEach(function(ss) {
       var data = ss.val();
       data['.priority'] = ss.getPriority();
       data['.name'] = ss.name();
       list.unshift(data); 
    });
   // print/process the results...
}

请注意,即使多达一千条记录(假设有效负载很小),这也是非常高效的。对于更健壮的用法,弗兰克的答案是权威的并且更具可扩展性。

这蛮力也可以通过做这样的事情监测优化,以更大的数据或多个记录的工作child_added/ child_removed/child_moved替代的事件value,并使用去抖散装而不是单独申请DOM更新。

自然地,DOM 更新无论采用哪种方法都是令人讨厌的,一旦您进入数百个元素,那么 debounce 方法(或 React.js 解决方案,本质上是一个 uber debounce)是一个很好的工具。

真的没有办法,但似乎我们有 recyclerview 我们可以拥有这个

 query=mCommentsReference.orderByChild("date_added");
        query.keepSynced(true);

        // Initialize Views
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        mManager = new LinearLayoutManager(getContext());
//        mManager.setReverseLayout(false);
        mManager.setReverseLayout(true);
        mManager.setStackFromEnd(true);

        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(mManager);

我有一个日期变量(长)并希望将最新的项目保留在列表的顶部。所以我所做的是:

  • 添加一个新的长字段“dateInverse”
  • 添加一个名为“getDateInverse”的新方法,它只返回:Long.MAX_VALUE - date;
  • 创建我的查询: .orderByChild("dateInverse")
  • 快!:p
请注意,这不适用于现有项目,除非您再次设置它们的值。
2021-03-19 12:34:18
您也可以在日期前放置一个减号。
2021-03-26 12:34:18