How to access a viewModel instance?

[marshallswain]

In the following example, I create a ViewModel and connect it to an imported AppHome component.

import AppHome from './app.jsx';

export const ViewModel = DefineMap.extend({
  message: {
    type: 'string',
    value: 'Hello, Feathers!'
  },

  changeMessage () {
    this.message = 'Hello, Marshall!';
  }
});

const AppContainer = connect(ViewModel, AppHome);

Suppose I want to pass message in the example to a component several levels deep. I'm passing the ViewModel constructor to the connect function, but how do I export the actual viewModel instance to make it available elsewhere? This is needed to link up can-route to a viewModel:

var ViewModel = DefineMap.extend({
    petType: "string",
    storeId: "number"
});

var viewModel = new ViewModel({
    petType: "string",
    storeId: "number"
});

route.data = viewModel;

Is there a way to extract the viewModel once its component has been rendered to the DOM?

[marshallswain]

Being able to pass a viewModel instance to the connect function is probably the best solution to this, but we probably will have to fix enumerability of DefineMap instance props.

Extracting from the DOM would only be a somewhat less messy solution for the top level component. For components that aren't calling ReactDOM.render themselves, it would be nothing but messy.

[BigAB]

I think you just need to rethink what you are doing here.

You almost certainly don't want get the viewModel off the DOM, this is React, the DOM has been extracted away.

If you needed access to the viewModel from an parent component you could use a ref to get the component and then access it at component.viewModel.

But for your use case, what you want to do is but the message, outside of the component viewmodel, in it's own state (or pass it through components all the way down).

import AppHome from './app.jsx';
import compute from 'can-compute';

export const message = compute('Hello, Feathers!');

export const ViewModel = DefineMap.extend({
  get message() {
     return message();
  },
  changeMessage () {
    message('Hello, Marshall!')
  }
});

const AppContainer = connect(ViewModel, AppHome);

...now you could export message from the AppContainer:

import { message } from '/components/AppContainer';

...or more likely you would have some model or something seperate that had message in it, that you would export and pass around.

RE: routing
As discussed on a call, the best way to connect a router is to use the router.data as a property on the viewmodel, or use derived values from the router.data as appropriate.

Let me know if you want to discuss more or if this issue can be closed.

[marshallswain]

Very nice. Yeah, I figured out the routing demo after I posted this, which works wonderfully. Between that and the examples you've posted, there's just enough flexibility to do pretty much anything👏🎉