How to use the ampersand-state.extend function in ampersand-state

//   this.forEach(function(model) {// jshint ignore:line
//     data[model.getId()] = model.serialize();
//     delete data[model.getId()][model.idAttribute];
//   });
//   // console.info('collectionToJSON', data);
//   return data;
// }



/***************************************\
 *                                     *
 *                                     *
 *                                     *
\***************************************/
var MaterialState = State.extend({
  idAttribute: 'name',
  typeAttribute: 'type',
  props: {
    type: ['string', false, null],
    name: ['string', false, null]
  },
  children: {
    color: Color
  }
});

MaterialState.types = {};



var MaterialCollection = Collection.extend({

// Throw an error when a URL is needed, and none is supplied.
var urlError = function () {
    throw new Error('A "url" property or function must be specified');
};

// Wrap an optional error callback with a fallback error event.
var wrapError = function (model, options) {
    var error = options.error;
    options.error = function (resp) {
        if (error) error(model, resp, options);
        model.trigger('error', model, resp, options);
    };
};

var Model = State.extend({
    save: function (key, val, options) {
        var attrs, method;

        // Handle both `"key", value` and `{key: value}` -style arguments.
        if (key == null || typeof key === 'object') {
            attrs = key;
            options = val;
        } else {
            (attrs = {})[key] = val;
        }

        options = assign({validate: true}, options);

        // If we're not waiting and attributes exist, save acts as
        // `set(attr).save(null, opts)` with validation. Otherwise, check if
        // the model will be valid when the attributes, if any, are set.

var programmableMixin = require('./../../programmable/mixin-state');

/***************************************\
 *                                     *
 *                                     *
 *                                     *
\***************************************/

var Euler = State.extend({
  props: {
    x: ['number', true, 0],
    y: ['number', true, 0],
    z: ['number', true, 0]
  }
});
var Vector3 = State.extend({
  props: {
    x: ['number', true, 0],
    y: ['number', true, 0],
    z: ['number', true, 0]
  }
});
// var Curve = State.extend({

// });
// var CurvePath = State.extend({

// });
// var Path = CurvePath.extend({

// });
var Shape = State.extend({

soundQueue = [],
    soundsPlaying = false,
    sounds,
    PlayerModel,
    playerProps,
    player0,
    player1;


// The beginnings of a model for sharing state between components
playerProps = {
    name: 'string',
    image: 'string'
};

PlayerModel = AmpersandState.extend({
    props: playerProps
});

player0 = new PlayerModel();
player1 = new PlayerModel();



var GameComponent = module.exports = React.createClass({



    getInitialState: function() {
        return {
            server: undefined,
            winner: undefined,

showError: function(message) {

        // TODO: introduce dedicated model?
        var model = AmpersandState.extend({
            props: {
                message: 'string'
            }
        });

        new ErrorDialog({
            model: new model({
                message: message
            })
        });
    }
});

catch(e) {
      result = e;
    }
    return result;
  };
})();`;
  try {
    eval(str);// jshint ignore:line
  }
  catch (e) {
    compiled = function(val) { return val; };
  }
  return compiled;
}

var MappingEmitter = State.extend({
  idAttribute: 'name',

  props: {
    targets: ['array', true, function() { return []; }],
    transformFunction: ['string', true, 'function(val){return val;}'],
    source: ['string', false, ''],
    name: ['string', true, null]
  },

  derived: {
    fn: {
      deps: ['transformFunction'],
      fn: function() {
        return compileTransformFunction(this.transformFunction);
      }
    },

test('should throw if no type attribute', function (t) {
    var r = new Registry();
    var S = State.extend({
        props: {
            id: 'string'
        }
    });
    var model = new S({id: '1'});
    t.throws(function () {
        r.store(model);
    });
    t.end();
});

test('get can be used with cid value or cid obj', function (t) {
    t.plan(2);

    var C = Collection.extend({
        model: State.extend({
            props: {
                id: 'number'
            }
        })
    });
    var collection = new C([{id: 1}, {id: 2}, {id: 3}]);
    var first = collection.at(0);

    t.equal(1, collection.get(first.cid).id);
    t.equal(1, collection.get({cid: first.cid}).id);

    t.end();
});

var context = require('./utils/context');
var State = require('ampersand-state');

var Base = State.extend({

  initialize: function (state, options) {
    this.context = options && options.context || context.get();
    State.prototype.initialize.apply(this, arguments);
  }
});

module.exports = Base;

var _ = require('underscore');
var State = require('ampersand-state');
var StoichSpecie = require('./stoich-specie');
var StoichSpecieCollection = require('./stoich-specie-collection');
var Parameter = require('./parameter');

var Reaction = State.extend({
    props: {
        name : 'string',
        equation : {
            type : 'string',
            default : function() { return ''; }
        },
        type : 'string',
        rate : 'object',
        subdomains :
        {
            type : 'object',
            default : function() { return []; }
        }
    },
    derived: {
        valid : {