How to access a viewModel instance?

[bigab]

How to access a viewModel instance?

[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👏🎉