Meteor + React: Meteor.subscribe(“Collection”，limit)触发每个列表元素
Meteor + React: Meteor.subscribe(“Collection”，limit)触发每个列表元素
提问于 2017-04-25 19:34:40
我有一个带有一些设置的Meteor订阅，所以我不会发布我的整个集合服务器端。订阅将在createContainer()中从meteor/react-meteor-data中获取，并显示在一个简单的<ul>列表中，其中我还将document.id作为键添加到<li>元素中。
不幸的是，一旦我在订阅第二个订阅参数(Meteor.subscripte('Collections', settings.limit)中增加了Meteor.subscripte('Collections', settings.limit，那么整个<ul>列表重选器呢？我可以做些什么来增加发布限制，同时只添加新的列表元素？
当我发布总集合并通过Collection.find({}, {limit: newLimit}).fetch()在我的客户端更改限制时，react就像预期的那样工作:保留原来的元素，只添加新元素！
客户端
import React, { Component } from 'react';
import { Locations } from '/both/collections/locations.js';
import { Events } from '/both/collections/events.js';
import { createContainer } from 'meteor/react-meteor-data';
class Content extends React.Component {
constructor(props) {
super(props);
this.renderLocations = this.renderLocations.bind(this);
}
renderLocations() {
return this.props.locations.map(function(location) {
return (<li key={location._id} >{location.name}</li>);
});
}
render() {
console.log(this.props);
return !this.props.loading && (
<div>
<ul>
{this.renderLocations()}
</ul>
<h1 onClick={this.props.increaseLimit}> Limit </h1>
<div style={{marginBottom: "100px"}}></div>
</div>
);
}
}
export default createContainer((props) => {
const settings = {
limit: props.limit,
}
const locationsSubscribe = Meteor.subscribe('Locations', settings);
const loading = !locationsSubscribe.ready();
if(loading) {
return { loading };
} else {
const _locations = Locations.find({}, {fields: { name: 1}, sort: { name: 1 }}).fetch();
return {
loading,
locations: _locations,
increaseLimit: props.increaseLimit,
};
}
}, Content);服务器端
Meteor.publish('Locations', function(settings) {
return Locations.find({}, {limit: settings.limit, sort: { name: 1} } );
});Collection.find().fetch()响应
[
{
"name": "3-Master Bike-Style",
"_id": "N9rWyZMdxEe6jhNW2"
},
{
"name": "43einhalb",
"_id": "bPgpBm59LohGLaAsf"
},
{
"name": "A&B Döner",
"_id": "qTNMk73ThvaPxGWqM"
},
{
"name": "A.T.U ",
"_id": "aWzSmp2zZ8etDhHk6"
},
{
"name": "AIKO Sushibar - Hot Wok",
"_id": "9pQJgeBNo5gFRkKdF"
},
{
"name": "AXA Stefan Hahn",
"_id": "d9f6mTrSTGCoeKPbP"
}
]Stack Overflow用户
回答已采纳
发布于 2017-04-26 16:19:52
问题在于您的服务器端逻辑。
当前代码：
Meteor.publish('Locations', function(settings) {
return Locations.find({}, {limit: settings.limit, sort: { name: 1} } );
});这将向客户端发送n个doc，基本上您是10、20、30等文档。
Fix：您需要跳过前面的文档。
解决方案：
Meteor.publish('Locations', function(settings) {
return Locations.find({}, {skip: settings.skip, limit: settings.limit, sort: { name: 1} } );
});或
Meteor.publish('Locations', function(settings) {
var skip = settings.pageNumber * settings.number_of_record_per_page; //change variable according to you
return Locations.find({}, {skip: settings.limit, limit: settings.limit, sort: { name: 1} } );
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43619472
复制相关文章
相似问题
腾讯云开发者
