Meteor Publish/Subscribe 与用户数据
Meteor Publish/Subscribe with users data
我用这个把头撞在砖墙上。似乎找不到适合我的示例。
这是我的服务器端
Meteor.publish("allUserData", function () {
return Meteor.users.find({}, {fields: {'username': 1, 'profile': 1}});
},
{is_auto: true});
这是我的客户
var allUserData = Meteor.subscribe("allUserData");
Tracker.autorun(function() {
if (allUserData.ready()) {
console.log('ready');
}
});
我收到了 'ready' 日志记录,但看不到如何遍历返回的数据???
你没有说你希望它如何遍历数据。 "standard" 方法是在 Blaze 中循环使用一个助手,returns 一个指向订阅集合的游标:
html:
{{#each user in users}}
{{user.username}}
{{/each}}
js:
Template.foo.onCreated(function() {
this.subscribe('allUserData');
});
Template.foo.helpers({
users() {
return Meteor.users.find({});
}
});
对于 React,您可以使用 createContainer() 在组件上设置 props。例如
import React, {Component} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
class FooComponent extends Component {
constructor(props) {
super(props);
}
render() {
if (this.props.loading) {
return (
<div>Loading</div>
)
}
return (
{
this.props.users.map(function(user, index) {
return (
<div key={index.toString()}>
{user.username}
</div>
)
}, this)
}
)
}
}
export default createContainer(() => {
let handle = Meteor.subscribe('allUserData');
let users = Meteor.users.find({});
let loading = !handle.ready();
return {
users,
loading
}
}, FooComponent);
我还没有测试过这个,如果它不对我认为它至少有点接近。如果我有什么不对的地方请原谅我,我的 React 技能还是很新的。
我用这个把头撞在砖墙上。似乎找不到适合我的示例。
这是我的服务器端
Meteor.publish("allUserData", function () {
return Meteor.users.find({}, {fields: {'username': 1, 'profile': 1}});
},
{is_auto: true});
这是我的客户
var allUserData = Meteor.subscribe("allUserData");
Tracker.autorun(function() {
if (allUserData.ready()) {
console.log('ready');
}
});
我收到了 'ready' 日志记录,但看不到如何遍历返回的数据???
你没有说你希望它如何遍历数据。 "standard" 方法是在 Blaze 中循环使用一个助手,returns 一个指向订阅集合的游标:
html:
{{#each user in users}}
{{user.username}}
{{/each}}
js:
Template.foo.onCreated(function() {
this.subscribe('allUserData');
});
Template.foo.helpers({
users() {
return Meteor.users.find({});
}
});
对于 React,您可以使用 createContainer() 在组件上设置 props。例如
import React, {Component} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
class FooComponent extends Component {
constructor(props) {
super(props);
}
render() {
if (this.props.loading) {
return (
<div>Loading</div>
)
}
return (
{
this.props.users.map(function(user, index) {
return (
<div key={index.toString()}>
{user.username}
</div>
)
}, this)
}
)
}
}
export default createContainer(() => {
let handle = Meteor.subscribe('allUserData');
let users = Meteor.users.find({});
let loading = !handle.ready();
return {
users,
loading
}
}, FooComponent);
我还没有测试过这个,如果它不对我认为它至少有点接近。如果我有什么不对的地方请原谅我,我的 React 技能还是很新的。