How to use backbone - 10 common examples

// borrowed from the Backbone.Associations tutorials
// separated out into modules to avoid namespace clashes

import * as Backbone from 'backbone';

// one-to-one tests
class EmployeeWithManager extends Backbone.AssociatedModel {
    constructor(options?) {
        super(options);
        this.relations = [
            {
                type: Backbone.One, //nature of the relationship
                key: 'manager', // attribute of Employee
                relatedModel: 'Employee' //AssociatedModel for attribute key
            }
        ];
    }

    defaults() {
        return {
            age: 0,
            fname: "",
            lname: "",

initialize: function(opts) {
      this.parent_fsm = opts.fsm;
      this.node = opts.node;
      this.model = new Backbone.Model(this.node);
      this.model.set("creation_url", null);
      // Since template uses states, rerender on new state
      this.fsm.onChange(this.render);
      this.fsm.onChange(function (state) {
        console.log("RESERVATION went into state", state);
      });
    },

}).on('ajaxError', function (event, xhr) {
            console.log(arguments);
            var resp = xhr.responseJSON;
            if (xhr.status == 401 && resp.error == "invalid_token") {
                // TODO refresh token
                alert(resp.error_description);
                location.href = "logout";
            }
            if (xhr.status == 403) {
                if (_.isArray(resp.details)) {
                    Backbone.trigger('exception', resp.details[0]);
                }
            }
        });

var DASH_WIDTH = 2;
var MOBILE_BAR_HEIGHT = 3;

var BEZIER_MARGIN_X = 0.1;
var BEZIER_MARGIN_Y = 1;

var trianglePath = function (x1, y1, x2, y2, x3, y3, yFactor) {
  // Bezier Control point y
  var cy = y3 + (yFactor * BEZIER_MARGIN_Y);
  // Bezier Control point x 1
  var cx1 = x3 + BEZIER_MARGIN_X;
  var cx2 = x3 - BEZIER_MARGIN_X;
  return 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2 + ' C ' + cx1 + ' ' + cy + ' ' + cx2 + ' ' + cy + ' ' + x1 + ' ' + y1 + ' z';
};

module.exports = CoreView.extend({
  options: {
    // render the chart once the width is set as default, provide false value for this prop to disable this behavior
    // e.g. for "mini" histogram behavior
    showOnWidthChange: true,
    chartBarColor: '#F2CC8F',
    labelsMargin: 16, // px
    hasAxisTip: false,
    minimumBarHeight: 2,
    animationSpeed: 750,
    handleWidth: 8,
    handleRadius: 3,
    divisionWidth: 80,
    animationBarDelay: function (d, i) {
      return Math.random() * (100 + (i * 10));
    },
    transitionType: 'elastic'

var _ = require('underscore');
var $ = require('jquery');
var CoreView = require('backbone/core-view');
var template = require('./analysis-option.tpl');
var Analyses = require('../../../data/analyses');

/**
 * View for an individual analysis option.
 */
module.exports = CoreView.extend({

  tagName: 'li',
  className: 'ModalBlockList-item',

  events: {
    'mouseenter': '_onMouseEnter',
    'mouseleave': '_onMouseLeave',
    'click': '_onClick'
  },

  initialize: function (opts) {
    this._simpleGeometryTypeInput = opts.simpleGeometryTypeInput; // might be undefined/null, so don't check

    this.listenTo(this.model, 'change:selected', this.render);
  },

initialize: function (opts) {
    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
    this._imageEnabled = opts.imageEnabled;
    this._hideTabs = opts.hideTabs;
    this.listenTo(this.model, 'change:attribute', this._fetchColumns);
    this._viewModel = new Backbone.Model({
      step: 0,
      status: 'idle'
    });

    this.listenTo(this._viewModel, 'change:status', this.render);

    // If it comes from a quantification change
    if (this.model.hasChanged('quantification') && this.model.get('quantification') === 'category') {
      this._fetchColumns();
    }
  },

onVisibilityChange: function(newVisibility) {
        // reset visibility will also reset the lists to empty
        this.setState({
            visibility: newVisibility,
            imageUsers: new Backbone.Collection(),
            activeAccessList: new Backbone.Collection()
        });
    },

initialize: function(options) {
    this.layer_plugins = options.layer_plugins || {};

    this.set('baseLayers', new Backbone.Collection());
    this.set('overlays', new Backbone.Collection());

    var process_layercfg = function(coll, layercfg) {
      var layer_plugin = this.layer_plugins[layercfg.type];
      if (!layer_plugin) {
        return;
      }
      coll.add(new layer_plugin.model(layercfg));
    };
      
    // read defaults from appconfig
    _.each(appconfig.baseLayers, _.bind(process_layercfg, this, this.get('baseLayers')));
    _.each(appconfig.overlays, _.bind(process_layercfg, this, this.get('overlays')));
  }
});

initialize: function() {
    this.router = this.options.router;
    this.localStorage = this.options.localStorage;
    // TODO: Get categories using an API.
    this.collection = new Backbone.Collection(); 
    this.template = cdb.templates.getTemplate('new_dashboard/views/categories');

    this._initBinds();
  },

/*
 * client/js/setup/backbone/marionette/application.js
 */

/* global app */

'use strict';

var path = require('path'),
    url = require('url');

var _ = require('lodash'),
    Backbone = require('backbone');

_.extend(Backbone.Marionette.Application.prototype, {
  deregisterController: function (controller) {
    delete this._controllers[controller._id];
  },

  getControllers: function () {
    return _.values(this._controllers);
  },

  getParsedUrl: function () {
    return url.parse(location.href);
  },

  getRoute: function () {
    return path.join('/', Backbone.history.fragment);
  },