Question

使用光标渲染时，Blaze的一个不错的功能是它会自动将dom中的每个字段连接到集合中的每个字段，从而使每个dom集合元素都具有反应性。这样可以最大限度地减少屏幕重绘。

但不幸的是，对于我的应用程序，我必须在渲染显示之前在客户端中对我的集合进行大量排序。这意味着我必须获取要显示到客户端的所有数据，对其进行排序，然后显示它。获取会破坏基于字段的反应性，并使我的应用程序重新获取集合中每次更改的所有数据。

是否有推荐的方法来处理这个问题，以便我可以使我的渲染更能响应我的集合中各个文档中的更改，而不必每次都刷新整个集合？

我在想，可能有一种观察集合变化的方法，然后使用jquery对我的dom进行适当的更改。有人试过这个作为优化技术吗？有什么建议吗？

Answer 1

根据我的经验，需要一个Meteor光标来实现#each循环的最佳反应渲染。

如果您从Meteor出版物中获取商品，则可以在客户端上对其进行排序而不进行提取，因此不会导致任何不必要的重新呈现。

var myItems = new Mongo.Collection('myItems');
Meteor.subscribe('myItems');

Template.myItems.helpers({
  getMyItems: function () {
    return myItems.find({}, {sort: [['myField', 'asc']]});
  }
});

如果您的数据来自其他来源（如外部REST API），或者数据是在客户端上创建的，则可以将数据存储在本地mini mongo集合中，而不是客户端上的常规JS数组中，以便获取#each循环的Meteor游标。

var myItems = new Mongo.Collection(null);
var dataReceived = [{myField: 'item1'}, {myField: 'item2'}, {myField: 'item3'}];
for (i in dataReceived) {
  myItems.insert(dataFromOtherSource[i]);
}

Template.myItems.helpers({
  getMyItems: function () {
    return myItems.find({}, {sort: [['myField', 'asc']]});
  }
});

现在您可以在'myItems'中插入，删除或编辑数据，并且只重新渲染数据的已更改部分。另外，我想，您可以更改模板助手中的排序参数，渲染仍然是最佳的。

用fetch优化反应火焰

1 个答案: