Meteor 1.6 + React (2)withTracker

最新推荐文章于 2018-12-14 00:51:36 发布

原创最新推荐文章于 2018-12-14 00:51:36 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

meteor 同时被 2 个专栏收录

5 篇文章

订阅专栏

react

3 篇文章

订阅专栏

本文介绍了一个使用Meteor.js框架构建的应用实例，包括任务管理和用户数据的发布订阅机制，以及如何在React组件中使用react-meteor-data进行数据跟踪。通过具体代码示例，展示了Meteor.js在实时数据同步方面的优势。

/imports/api/task.js

import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('tasks', function tasksPublication() {
    return Tasks.find();
  });
}

/server/main.js

import { Meteor } from 'meteor/meteor';

import '/imports/api/tasks';

Meteor.startup(() => {
  // code to run on server at startup
  Meteor.publish('allUsers',() => {
    return Meteor.users.find();
  });
});

/imports/ui/App.js

import React, {Component} from 'react';

import {withTracker} from 'meteor/react-meteor-data';

import {Tasks} from '/imports/api/tasks';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default withTracker(props => {
    // Do all your reactive data access in this method.
    // Note that this subscription will get cleaned up when your component is unmounted
    const handles = [
      Meteor.subscribe('tasks', props.id),
      Meteor.subscribe('allUsers')
    ];

    const loading = handles.some(handle => !handle.ready());
    console.log('loading',loading);
    return {
      currentUser: Meteor.user(),
      listLoading: loading,
      tasks: Tasks.find({listId: props.id}).fetch(),
    };
  }
)(App);