Meteor React 2 Коллекция понижения уровня перестала быть реактивной

У меня есть 1 проект с одним или несколькими деревьями задач.

Для каждого taskTree у меня есть несколько задач.

Проблема в том, что всякий раз, когда я добавляю новую задачу, я не вижу добавленную задачу, пока не обновлю страницу.

Я использую Meteor React 1.2.1 со следующими пакетами

react
kadira:flow-router
meteortoys:allthings
kadira:react-layout

У меня тоже 3 коллекции.

Projects = new Mongo.Collection("projects")
TaskTrees = new Mongo.Collection("task-trees")
Tasks = new Mongo.Collection("tasks")

Структура моей коллекции выглядит так:

**Projects**
_id
taskTrees: [taskTreeId]

**TaskTrees**
_id
tasks: [taskId]

**Tasks**
_id
title

Я использую FlowRouter для рендеринга ProjectPage

FlowRouter.route('/project-page', {
    action(params, queryParams) {
        ReactLayout.render(ProjectPage)
    }
})

Это мои 3 класса реагирования

ProjectPage = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('project-page')
        return {
            taskTrees: TaskTrees.find().fetch()
        }
    },

    renderTaskTrees() {
        if(this.data.taskTrees) {
            return this.data.taskTrees.map( (taskTree) => {
                return <TaskTree
                    key={taskTree._id}
                    taskTreeId={taskTree._id} />
            })
        }
    },

    render() {
        return(
            <div>
                RenderingTaskTree
                {this.renderTaskTrees()}
            </div>
        )
    }
})

TaskTree = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('task-tree', this.props.taskTreeId)
        return {
            tasks: Tasks.find().fetch()
        }
    },

    renderTasks() {
        if(this.data.tasks) {
            return this.data.tasks.map( (task) => {
                return <Task
                    key={task._id}
                    title={task.title} />
            })
        }
    },

    render() {
        return(
            <div>{this.renderTasks()}</div>
        )
    }
})

Task = React.createClass({
    render() {
        return(
            <div>
                <div>Title: {this.props.title}</div>
            </div>
        )
    }
})

Это мой метод публикации в папке сервера

Meteor.publish('project-page', () => {
    const project = Projects.findOne()
    if(project.taskTrees) {
        const taskTrees = TaskTrees.find({_id: {$in: project.taskTrees}})
        return taskTrees
    }
    this.ready()
})

Meteor.publish('task-tree', (taskTreeId) => {
    const taskTree = TaskTrees.findOne({_id: taskTreeId})
    if(taskTree.tasks) {
        const tasks = Tasks.find({_id: {$in: taskTree.tasks}})
        return tasks
    }
    this.ready()
})

person Eric Kim    schedule 28.10.2015    source источник


Ответы (1)


Я думаю, что для вас имеет смысл поместить все подписки, которые вам нужны, от [ReactMeteorData] внутри ProjectPagecomponent, а затем передать реактивные данные как props его дочерним элементам.

Кроме того, вы должны возвращать курсоры непосредственно в функции публикации, как здесь.

Итак, ваша первая функция публикации теперь будет выглядеть так:

if(project.taskTrees) {
    return TaskTrees.find({_id: {$in: project.taskTrees}});
}
person etmarch    schedule 03.12.2015