How to use the @jupyter-widgets/base.WidgetModel function in @jupyter-widgets/base

this.model.on('change:background_color', () => {
            this.view.renderer.setClearColor(this.model.get('background_color'));
        });
        this.model.on('change:datablocks', () => {
            this.datablock_views.update(this.model.get('datablocks'));
        });
    },

    remove: function() {
        SceneView.__super__.remove.apply(this, arguments);
        return this.view.remove();
    }
});

let ComponentModel = widgets.WidgetModel.extend({
    defaults: _.extend({}, widgets.WidgetModel.prototype.defaults, {
        _model_name : 'ComponentModel',
        // _view_name : 'ComponentView',
        _model_module : 'odysis',
        _view_module : 'odysis',
        _model_module_version : odysis_version,
        _view_module_version : odysis_version,
        name: '',
        array: [],
        min: undefined,
        max: undefined
    })
}, {
    serializers: _.extend({
        array: serialization.float32array
    }, widgets.WidgetModel.serializers)
});

//
//  - `_view_name`
//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.
var EarthModel = widgets.DOMWidgetModel.extend({
    //defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
    defaults: _.extend({}, widgets.WidgetModel.prototype.defaults, {

        _model_name : 'EarthModel',
        _view_name : 'EarthView',
        _model_module : 'ipyearth',
        _view_module : 'ipyearth',
        _model_module_version : '0.1.0',
        _view_module_version : '0.1.0',
        width : "100%",
        height : "600px",
    })
});


// Custom View. Renders the widget model.
var EarthView = widgets.DOMWidgetView.extend({
    render: function() {

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

const widgets = require('@jupyter-widgets/base');
const PMessaging = require('@phosphor/messaging');
const PWidgets = require('@phosphor/widgets');
const L = require('../leaflet.js');
const utils = require('../utils.js');

export class LeafletLayerModel extends widgets.WidgetModel {
  defaults() {
    return {
      ...super.defaults(),
      _view_name: 'LeafletLayerView',
      _model_name: 'LeafletLayerModel',
      _view_module: 'jupyter-leaflet',
      _model_module: 'jupyter-leaflet',
      opacity: 1.0,
      bottom: false,
      options: [],
      name: '',
      base: false,
      popup: null,
      popup_min_width: 50,
      popup_max_width: 300,
      popup_max_height: null

const L = require('../leaflet.js');
const layer = require('./Layer.js');

export class LeafletMarkerClusterModel extends layer.LeafletLayerModel {
  defaults() {
    return {
      ...super.defaults(),
      _view_name: 'LeafletMarkerClusterView',
      _model_name: 'LeafletMarkerClusterModel',
      markers: []
    };
  }
}

LeafletMarkerClusterModel.serializers = {
  ...widgets.WidgetModel.serializers,
  markers: { deserialize: widgets.unpack_models }
};

export class LeafletMarkerClusterView extends layer.LeafletLayerView {
  render() {
    super.render();
    this.update_markers(this.model.get('markers'), []);
  }

  update_markers(newMarkers, oldMarkers) {
    // Shortcut the case of appending markers
    var appendOnly =
      oldMarkers.length <= newMarkers.length &&
      oldMarkers === newMarkers.slice(0, oldMarkers.length);
    var markers;
    if (appendOnly) {

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

const widgets = require('@jupyter-widgets/base');
const L = require('../leaflet.js');
const utils = require('../utils.js');

export class LeafletControlModel extends widgets.WidgetModel {
  defaults() {
    return {
      ...super.defaults(),
      _view_name: 'LeafletControlView',
      _model_name: 'LeafletControlModel',
      _view_module: 'jupyter-leaflet',
      _model_module: 'jupyter-leaflet',
      options: [],
      position: 'topleft'
    };
  }
}

export class LeafletControlView extends utils.LeafletWidgetView {
  initialize(parameters) {
    super.initialize(parameters);

initialize: function () {
        var obj = arguments[0];

        widgets.WidgetModel.prototype.initialize.apply(this, arguments);

        this.on('change', this._change, this);
        this.on('msg:custom', function (msg) {
            var obj;

            if (msg.msg_type === 'fetch') {
                obj = this.get(msg.field);

                // hack because of https://github.com/jashkenas/underscore/issues/2692
                if (_.isObject(obj)) {
                    obj.t = Math.random();
                }

                this.save(msg.field, obj);
            }

define(function (require, exports, module) {

	var jupyter_widgets = require('@jupyter-widgets/base');
	var GEPPETTO = require('geppetto');
	var _ = require('underscore');

	var ComponentSync = jupyter_widgets.WidgetModel.extend({
		defaults: _.extend({}, jupyter_widgets.WidgetModel.prototype.defaults, {
			value: undefined,
			parent: null,
			componentType: undefined
		}),

		initialize: function (options) {
			ComponentSync.__super__.initialize.apply(this, arguments);

			this.on("msg:custom", this.handle_custom_messages, this);
			this.on("change:value", this.handle_value_change, this);

		},

		syncValueWithPython: function (value) {
			var jsonValue = JSON.stringify(value);
			this.set('value', jsonValue);

import * as widgets from '@jupyter-widgets/base';
import {defaultAttributes} from './defaults';

export class GMapsLayerView extends widgets.WidgetView {
    initialize(parameters) {
        super.initialize(parameters);
        this.mapView = this.options.mapView;
    }
}

export class GMapsLayerModel extends widgets.WidgetModel {
    defaults() {
        return {
            ...super.defaults(),
            ...defaultAttributes,
            _view_name: 'GMapsLayerView',
            _model_name: 'GMapsLayerModel',
        };
    }
}

define(function (require, exports, module) {

	var jupyter_widgets = require('@jupyter-widgets/base');
	var GEPPETTO = require('geppetto');
	var _ = require('underscore');

	var ComponentSync = jupyter_widgets.WidgetModel.extend({
		defaults: _.extend({}, jupyter_widgets.WidgetModel.prototype.defaults, {
			value: undefined,
			parent: null,
			componentType: undefined
		}),

		initialize: function (options) {
			ComponentSync.__super__.initialize.apply(this, arguments);

			this.on("msg:custom", this.handle_custom_messages, this);
			this.on("change:value", this.handle_value_change, this);

		},

		syncValueWithPython: function (value) {
			var jsonValue = JSON.stringify(value);

define(function (require, exports, module) {

	var jupyter_widgets = require('@jupyter-widgets/base');
	var GEPPETTO = require('geppetto');
	var _ = require('underscore');


	var EventsSync = jupyter_widgets.WidgetModel.extend({
		defaults: _.extend({}, jupyter_widgets.WidgetModel.prototype.defaults, {
			_model_name: 'EventsSync',
			_model_module: "jupyter_geppetto",
			_model_module_version : '~1.0.0',
		}),

		initialize: function () {
			EventsSync.__super__.initialize.apply(this, arguments);
			_this = this;

			GEPPETTO.on(GEPPETTO.Events.Instances_created, function (instances) {
				var instancesIds = []
				for (var instanceIndex in instances) {
					instancesIds.push(instances[instanceIndex].id)
				}
				_this.send({ event: GEPPETTO.Events.Instances_created, data: instancesIds });