How to use can - 10 common examples

].join(modifier.delim);
			processors[processorName] = function (el, nil, selector, methodName, control) {
				var callback = modifier.modify(mod, can.Control._shifter(control, methodName), control.options);
				control[event] = callback;
				if (!selector) {
					selector = can.trim(selector);
				}
				can.delegate.call(el, selector, event, callback);
				return function () {
					can.undelegate.call(el, selector, event, callback);
				};
			};
		}
	};
// Redefine _isAction to handle new syntax
can.extend(can.Control, {
	modifier: modifier,
	setup: function (el, options) {
		can.each(this.prototype, function (fn, key, prototype) {
			var parts, event, mod;
			if (modifier.hasModifier(key)) {
				// Figure out parts
				parts = key.split(modifier.delim);
				event = parts.shift()
					.split(' ')
					.pop();
				mod = parts.join('');
				if (!(can.trim(key) in processors)) {
					modifier.addProcessor(event, mod);
				}
			}
		});

var can = require('can/util/util');
require('can/util/string/string');

// ## deparam.js
// `can.deparam`
// _Takes a string of name value pairs and returns a Object literal that represents those params._
var digitTest = /^\d+$/,
	keyBreaker = /([^\[\]]+)|(\[\])/g,
	paramTest = /([^?#]*)(#.*)?$/,
	prep = function (str) {
		return decodeURIComponent(str.replace(/\+/g, ' '));
	};
can.extend(can, {
	deparam: function (params) {
		var data = {}, pairs, lastPart;
		if (params && paramTest.test(params)) {
			pairs = params.split('&');
			can.each(pairs, function (pair) {
				var parts = pair.split('='),
					key = prep(parts.shift()),
					value = prep(parts.join('=')),
					current = data;
				if (key) {
					parts = key.match(keyBreaker);
					for (var j = 0, l = parts.length - 1; j < l; j++) {
						if (!current[parts[j]]) {
							// If what we are pointing to looks like an `array`
							current[parts[j]] = digitTest.test(parts[j + 1]) || parts[j + 1] === '[]' ? [] : {};
						}

setup: function (el, options) {
		can.each(this.prototype, function (fn, key, prototype) {
			var parts, event, mod;
			if (modifier.hasModifier(key)) {
				// Figure out parts
				parts = key.split(modifier.delim);
				event = parts.shift()
					.split(' ')
					.pop();
				mod = parts.join('');
				if (!(can.trim(key) in processors)) {
					modifier.addProcessor(event, mod);
				}
			}
		});
		originalSetup.apply(this, arguments);
	}
});

// can.batch.start();
// console.log('pushing 0');
// vm.attr('data').push(0);
// can.batch.stop();

// can.batch.start();
// console.log('pushing 150');
// vm.attr('data').push(150);
// can.batch.stop();

// can.batch.start();
// vm.attr('graph').attr('xScale', d3.scale.linear().domain([0, 6]).range([0, 100]));
// vm.attr('graph').attr('yScale', d3.scale.linear().domain([0, 150]).range([100, 0]));
// can.batch.stop();

can.Component.extend({
    tag: "bit-series",
    viewModel: BitSeriesVM,
    events: {
        inserted: function() {
            var parentScope = this.element.parent().scope();
            this.scope.attr('graph', parentScope);
            parentScope.addSeries(this.scope);
        },
        removed: function() {
            this.element.parent().scope().removeSeries(this.scope);
        }
    }
});

export var BitGraphVM = can.Map.extend({
    define: {

// // console.log('pushing 0');
// // bs1.attr('data').push(0);
// // can.batch.stop();

// // // can.batch.start();
// // // console.log('pushing 500');
// // // bs2.attr('data').push(500);
// // // can.batch.stop();

// // can.batch.start();
// // console.log('pushing 7 and 8');
// // bs3.attr('data').push(7);
// // bs3.attr('data').push(8);
// // can.batch.stop();

can.Component.extend({
    tag: "bit-graph",
    template: template,
    viewModel: BitGraphVM,
    events: {
        inserted: function(scope, el) {
            // TODO select this based on a child of el
            var graphBaseElement = d3.select(document.getElementById('graph'))
            this.scope.renderBaseGraph(graphBaseElement);
        },
        // "{scope} xScale": function() {
        //     this.scope.refreshAxes();
        // },
        // "{scope} yScale": function() {
        //     this.scope.refreshAxes();
        // },
        "{scope} seriesSerialized": function() {

import Map from 'can/map/';
import 'can/map/define/';

// recognition.continuous = true;
// recognition.interimResults = true;

export default Map.extend({
  define: {
    transcript: {
      value: ''
    },

    restart: {
      value: true
    }
  },

  init() {
    this.recognition = new webkitSpeechRecognition();
    this.recognition.onresult = this.result.bind(this);
  },

  result(event) {

//
// ```
// object.bind("change.orange", function() {});
// object.bind("click.orange", function() {});
//
// // This unbinds all events using the "orange" namespace.
// object.unbind(".orange");
// ```
var can = require('can/util/can');
require('can/event/event');

// ## can.event.addEvent
//
// Adds an event listener (with namespacing support included).
var addEvent = can.addEvent;
can.addEvent = can.event.addEvent = can.event.on = can.event.bind = function(event, fn) {
	// Bypass namespaces for Maps
	// Otherwise it conflicts with map attribute binding.
	if (can.Map && this instanceof can.Map) {
		return addEvent.call(this, event, fn);
	}

	// Split the namespaces out
	if (event && event.indexOf('.') > -1) {
		var namespaces = event.split('.');
		// The event name is the first item in the string
		event = namespaces[0];
	}

	// Add the listener using the original addEvent
	addEvent.call(this, event, fn);

/**
 * @function can.event.delegate.delegate
 * @parent can.event.delegate
 * @plugin can/event/delegate
 * @signature `obj.delegate( selector, event, handler )`
 *
 * Adds a delegate event listener.
 *
 * @param {String} selector A selector to match against the stack of propagated objects.
 *                          The names used are based on the names of the constructors of
 *													the original objects.
 * @param {Object|String} event The event name or object to listen to.
 * @param {Function} handler The handler to call when the event occurs.
 * @return {Object} this
 */
can.event.delegate = function(selector, event, handler) {
	// Split the selector into parts that can be verified
	var parts = selector && selector.split(/\s+/),
		// Implement the custom delegation handler
		// This is used to verify the selector prior to executing the original handler
		delegate = function(ev) {
			// Verify descendants against the selector
			// These descendants are tracked in the `can/event/propagate` plugin
			for (var i = 0, j = 0, descendant; j < parts.length && (descendant = ev.descendants[i]); i++) {
				// A descendant name is considered valid if it matches the `shortName` or `_shortName`
				// properties on the constructor. Generally, this assumes that `can.Construct` or a
				// similar can-based class is used (which defines those properties by default).
				if (descendant.constructor && (parts[j] === descendant.constructor._shortName || parts[j] === descendant.constructor.shortName)) {
					j++;
				}
			}

// Inject namespaces if applicable
	if (namespaces && namespaces.length > 1) {
		var events = this.__bindEvents[event];
		// Assign the namespaces property, including the array of all namespaces
		events[events.length-1].namespaces = namespaces.slice(1);
	}

	return this;
};

// ## can.event.removeEvent
//
// Removes an event listener (with namespacing support included).
var removeEvent = can.removeEvent;
can.removeEvent = can.event.removeEvent = can.event.off = can.event.unbind = function(event, fn, __validate) {
	// Bypass namespaces for Maps
	// Otherwise it conflicts with map attribute binding.
	if (can.Map && this instanceof can.Map) {
		return removeEvent.call(this, event, fn);
	}

	// Split the namespaces out
	if (event && event.indexOf('.') > -1) {
		var namespaces = event.split('.');
		// The event name is the first item in the string.
		// Also, remove this item from the namespace array for future processing.
		event = namespaces.splice(0,1)[0];
	}

	// Handle namespace-only (no event name).
	if (!event && namespaces && namespaces.length > 0) {

var hasObjectLookup, readyCompute;

			paramReplacer.lastIndex = 0;

			hasObjectLookup = paramReplacer.test(methodName);

			// If we don't have options (a `control` instance), we'll run this
			// later.
			if (!controlInstance && hasObjectLookup) {
				return;
			} else if (!hasObjectLookup) {
				return can.Control._action.apply(this, arguments);
			} else {
				// We have `hasObjectLookup` and `controlInstance`.

				readyCompute = can.compute(function() {
					var delegate;

					// Set the delegate target and get the name of the event we're listening to.
					var name = methodName.replace(paramReplacer, function(matched, key) {
						var value;

						// If we are listening directly on the `viewModel` set it as a delegate target.
						if (key === "scope" || key === "viewModel") {
							delegate = options.viewModel;
							return "";
						}

						// Remove `viewModel.` from the start of the key and read the value from the `viewModel`.
						key = key.replace(/^(scope|^viewModel)\./, "");
						value = can.compute.read(options.viewModel, can.compute.read.reads(key), {
							// if we find a compute, we should bind on that and not read it