Nestable Processes Mutate

    react-view-model

    1.0.1 • Public • Published

    React-View-Model

    Build Status Greenkeeper badge

    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

    Install

    npm i react-view-model

    Homepage

    canjs.com

    DownloadsWeekly Downloads

    40

    Version

    1.0.1

    License

    none

    Unpacked Size

    102 kB

    Total Files

    42

    Last publish

    Collaborators

    • bitovi-core-os
    • blackmarket
    • chasen
    • christopherjbaker
    • designbyonyx
    • justinbmeyer
    • m-mujica
    • matthewp
    • mickmcgrath13
    • phillipskevin