bigab/react-view-models

A library for adding Observable Objects as View Models to React components

bigab

Just reserving this package name on npm

react-view-models's Issues

How to access a viewModel instance?

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?

Don't naively copy all methods to the props object

Right now, when using a view-model as the connected source, @bigab/react-view-models copies and binds all the methods of an instance to the props object.

This should be smarter and rely on the methods defined in the observable definitions object

also

For a viewModel, maybe the methods should not be copied and bound every time, they should be bound once during the connect methods and just cached and Object.assign()ed on when props update

Rename the componenent

There should be an option to rename the component, and how it appears in the react dev tools

Should we have props be set to an attribute called props?

It may be a good idea to do vm.set({ props: props }) rather than calling vm.set(props) when the component receives props. Maybe.

Though it seemed like a good idea to take the props passed into a Connected Container Component and just mix them into the viewModel with vm.set(props), it actually ends up forcing the user to write weird code like this:

const ViewModel = DefineMap.extend({
  didHaveItsCallbackCalled: {
    type: 'boolean'
  },
  callback: {
    type: 'any',
    set(newVal) {
      return (ev) => {
        this.didHaveItsCallbackCalled = true;
        return newVal(ev);
      }
    }
  }
});

but would this be better?:

const ViewModel = DefineMap.extend({
  didHaveItsCallbackCalled: {
    type: 'boolean'
  },
  callback(ev)
    this.didHaveItsCallbackCalled = true;
    return this.props.callback(ev);
  }
});

Another more serious problem, is that, in the current implementation, props always "win".
You could have the viewModels values change, but because everytime the new props are computed the parents props get set on viewModel, the view model always wins. See this example:
https://gist.github.com/BigAB/b94f58a634c64453e08ab61c26f764c2

Solving that problem by only setting the viewModel values when "props are received", might end up being an even more confusing situation, as you get into this strange situation where outer forces are changing the VM value and then suddenly props get updated and wipe out other changes. It becomes very strange. but then again, that's how react works now, so maybe that's a non-issue.

Also, the current way, all props get passed to the child Presentational Component by default and it becomes annoying to bypass that for individual props, but this change makes it so no props are passed by default and you must explicitly write a serialized getter to pass props through:

const ViewModel = DefineMap.extend({
  bar: {
    get() {
      return this.props.bar;
    },
    serialize: true
  }
});

So... yeah, not sure which way to go on this one.