extend

function

Define the behavior of a custom element.

`Component.extend(prototype)`

Extends the can-component constructor function with prototype properties and methods. Registers the component by its tag with can-view-callbacks.tag.

var Component = require("can-component");
var stache = require("can-stache");
var DefineMap = require("can-define/map/map");

var VM = DefineMap.extend({ ... });

Component.extend({
  tag: "tag-name",
  ViewModel: VM,
  view: stache(" .... ")
});

Parameters

prototype {Object}:
An object set as the prototype of the constructor function. You will typically provide the following values on the prototype object:
- tag {tag} - Defines the tag on which instances of the component constructor function will be created.
- ViewModel {ViewModel} - Specifies an object that is is used to render the component's template.
- view {view} - Specifies the template rendered within the custom element.
And sometimes the following values are provided:
- events {events} - Defines events on dom elements or observable objects the component listens to.
- helpers {helpers} - Specifies mustache helpers used to render the component's template.

Use

Note that inheriting from components works differently than other CanJS APIs. You can't call .extend on a particular component to create a "subclass" of that component.

Instead, components work more like HTML elements. To reuse functionality from a base component, build on top of it with parent components that wrap other components in their template and pass any needed viewModel properties via attributes.