Reactivity and CreateContainer

shibbn · June 30, 2016, 6:52pm

Hello,

Does any one have an example of a master / detail view which changes reactively according to which field in the master view was clicked.

Example
Masterview: list of authors, Detailview: list of books…
Click on an author will let you see all books of the author in the detail view.

The official meteor react app does this but binds the createContainer params to react router…I’m not sure how to do it reactively without a router.

I assume the layout would be DataContainer (createContainer for data) --> ComponentsContainer (i.e. page which renders master component and detail component)

So how would I get the ComponentsContainer to reactively interact with the DataContainer

Thanks for any advice!

sashko · June 30, 2016, 6:55pm

ReactRouter just puts the params in the props of the container. Any props on your container component can be accessed in the argument to the createContainer function.

If you want a child to pass data back up to the parent, you can do that by setting a route, using a callback from the parent, or using a ReactiveVar passed to the child.

shibbn · June 30, 2016, 7:06pm

Do you know of a code example? That would really be extremely helpful in this case.

Thanks for the advice though!

shibbn · July 1, 2016, 12:02am

anyone have a code example? just need to see the important points

shibbn · July 2, 2016, 2:23pm

For anyone looking at this thread in the future, after looking through meteor forums and SO I found this as a good source to how to use reactiveVar to achieve my result

github.com

alexknipfer/AthleteTracker/blob/1f47e84da608152a25eb2b7ea32b2deea191ff4f/client/Coach/containers/manageStudents.js

import { createContainer } from 'meteor/react-meteor-data';
import ManageStudents from '../components/ManageStudents/ManageStudents.js';

let searchQuery = new ReactiveVar("");
let searching = new ReactiveVar(false);

export default createContainer(() => {

  const handle = Meteor.subscribe( 'students', searchQuery.get(), () => {
      setTimeout( () => {
        searching.set( false );
      }, 300 );
    });

  const totalStudentsHandle = Meteor.subscribe("totalStudents");

  const loading = !handle.ready() && !totalStudentsHandle.ready();

  const myStudents = StudentDataCoach.find({
    createdBy: Meteor.userId()

This file has been truncated. show original

And this as to how to do it with props