How to use the backbone.marionette.View function in backbone

// @flow
import { helpers } from 'utils';
import LayoutBehavior from './behaviors/LayoutBehavior';
import Marionette from 'backbone.marionette';

const classes = {
    CLASS_NAME: 'layout__horizontal-layout',
    ITEM: 'layout__horizontal-layout-list-item',
    HIDDEN: 'layout__hidden'
};

export default Marionette.View.extend({
    initialize(options) {
        helpers.ensureOption(options, 'columns');

        this.columns = options.columns;
    },

    tagName: 'div',

    template: _.noop,

    className() {
        return `${classes.CLASS_NAME} ${this.options.class || ''}`;
    },

    behaviors: {
        LayoutBehavior: {

beforeEach(function() {
        this.myView = new View({ template: _.noop });

        const MyApp = this.MyApp.extend({
          onBeforeStart() {
            return this.getView();
          }
        });

        this.spy = this.sinon.spy(MyApp.prototype, 'onBeforeStart');

        this.myApp = new MyApp();

        this.myApp.setView(this.myView);
      });

previous.empty();
    }
  },

  onChildviewAddSet: function(attrs) {
    this.setDetails(attrs);
  },

  /** Clear the sets from localstorage.
  */
  clearSets: function() {
    this.collection.clearStored();
  }
});

export const CreateWorkout = Marionette.View.extend({
  template: require('../templates/create/layout.html'),

  events: {
    'click @ui.save': 'saveWorkout'
  },

  triggers: {
    'click @ui.cancel': 'show:list'
  },

  modelEvents: {
    sync: 'renderSetList',
    save: 'saveComplete'
  },

  ui: {

},

  onShowList: function() {
    Backbone.history.navigate('workout/');
  },

  onShowEdit: function() {
    Backbone.history.navigate(this._editUrl());
  },

  _editUrl: function() {
    return `${this.model.displayUrl()}/edit`;
  }
});

const WorkoutItem = Marionette.View.extend({
  className: 'col-md-6 col-lg-4 col-sm-12',

  template: require('../templates/workout/item.html'),

  templateContext: function() {
    const panelIndexes = {
      0: 'info',
      1: 'danger',
      2: 'warning',
      3: 'success',
      4: 'default'
    };
    const location = this.model.get('location');

    return {
      iterType: panelIndexes[this.getOption('index') % 5],

import Marionette from 'backbone.marionette';
import template from 'templates/item';

export default Marionette.View.extend({
  template: template
});

},
    swapRows() {
        startMeasure("swapRows");
        if (this.length > 998) {
            const a = this.models[1];
            this.models[1] = this.models[998];
            this.models[998] = a;
            this.trigger('swap', this.models[1], this.models[998]);
        }
        stopMeasure();
    }
});

const store = new Store();

const ChildView = Mn.View.extend({
    tagName: 'tr',
    attributes() {
        return {
            'data-id': this.model.id
        };
    },
    monitorViewEvents: false,
    template: rowTemplate
});

const CollectionView = Mn.NextCollectionView.extend({
    childViewEventPrefix: false,
    monitorViewEvents: false,
    viewComparator: false,
    el: '#tbody',
    childView: ChildView,

import {SetList} from '../../sets/collections/sets';


export const SetView = Marionette.View.extend({
  tagName: 'li',
  className: 'list-group-item',
  template: require('../templates/workout/set.html')
});

export const SetListView = Marionette.CollectionView.extend({
  tagName: 'ol',
  className: 'list-group',
  childView: SetView
});

const SetContainerView = Marionette.View.extend({
  template: require('../templates/workout/exercise.html'),
  className: 'col-lg-3',

  regions: {
    sets: {
      selector: 'ol',
      replaceElement: true
    }
  },

  onRender: function() {
    this.showChildView('sets', new SetListView({
      collection: this.collection
    }));
  },

if (!selected) {
            return;
        }
        const curSelected = this.children.findByModel(selected);
        curSelected.$el.removeClass('danger');
    }
});

const collectionView = new CollectionView({
    collection: store
});

collectionView.render();

const MainView = Mn.View.extend({
    el : '.jumbotron',
    events: {
        'click #run'() { store.run(); },
        'click #runlots'() { store.runLots(); },
        'click #add'() { store.addData(); },
        'click #update'() { store.updateData(); },
        'click #clear'() { store.clear(); },
        'click #swaprows'() { store.swapRows(); },
    }
});

new MainView();

/**
 * @module components/settings/show/View
 */
import Mn from 'backbone.marionette';
import _ from 'underscore';
import Content from '../../../behaviors/Content';

/**
 * Settings layout view.
 *
 * @class
 * @extends Marionette.View
 * @license MPL-2.0
 */
export default class View extends Mn.View {

    get template() {
        const tmpl = require('./template.html');
        return _.template(tmpl);
    }

    /**
     * Behaviors.
     *
     * @see module:behaviors/Content
     * @returns {Array}
     */
    get behaviors() {
        return [Content];
    }

/**
 * @module components/navbar/View
 */
import Mn from 'backbone.marionette';
import Radio from 'backbone.radio';
import _ from 'underscore';
import Sidemenu from '../../behaviors/Sidemenu';

/**
 * Navbar view.
 *
 * @class
 * @extends Marionette.View
 * @license MPL-2.0
 */
export default class View extends Mn.View {

    get template() {
        const tmpl = require('./template.html');
        return _.template(tmpl);
    }

    /**
     * Radio channel (components/navbar.)
     *
     * @returns {Object}
     */
    get channel() {
        return Radio.channel('components/navbar');
    }

    /**