React-View-Model

Connect observable view-model to React presentational components to create auto rendering container components.

Install

ES6

import reactViewModel from 'react-view-model';
import { Component } from 'react-view-model';
import { makeReactComponent } from 'react-view-model';

CommonJS

var reactViewModel = require('react-view-model');
var Component = require('react-view-model').Component;
var makeReactComponent = require('react-view-model').makeReactComponent;

Common use cases when using a view model

Here are some examples that may come up when using a view-model that may not be obvious at first:

Transforming a prop before passing it down to a child component

Sometimes you want a prop that is set on your connected component to be set to the exact same prop key on the child component, but modified slightly before passing it down. Here’s an example of that:

const ViewModel = DefineMap.extend({
  someProp: {
    set( newVal ) {
      return newVal.toUpperCase();
    }
  }
});

Calling a parent’s callback while also doing something special in your view-model’s callback

Sometimes you still want to notify the connected component’s owner component that the state changed (by calling a callback), but only after or while doing something different within the view-model. In this case, you’ll want to define the callback prop as a observable attribute with a getter, rather than a method, and use the lastSetVal argument to call the parent component’s callback.

const ViewModel = DefineMap.extend({
  onChange: {
    type: 'function',
    get( lastSetValue ) {
      return (ev) => {
        this.changeTheThing(ev.target);
        if ( lastSetValue ) {
          return lastSetValue(ev);
        }
      };
    }
  }
});

Contributing

Contributing

Running the tests

Tests can run in the browser by opening a webserver and visiting the test/test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test

License

MIT