Component and BoundComponent Constructors

The component class is an abstract class intended to be the base class for views. It is also the base class for the BoundComponent class.

The Component class is intended to be used as the base class for views you might create. It is also used as the base class for the BoundComponent class, which is nothing more than a small (one-element), one- or two-way bound view. The bulk of the class is in the constructor, which is described in this document.

There are two main ways to create a component: either converting an existing element to a component or creating a new element on the fly. To enable this, the constructor accepts an element, a selector to look up an element, or details to create a new element (either by supplying a tagname and inner html or the full outer html).

Link to the demo script

API

Code Type Detail
constructor(); Component

When provided with an empty constructor, the component content is an empty DIV with an autogenerated id.

constructor(lookupExistingElement: IExistingLookupOptions); Component

When lookup details are provided, the component uses the options to find an existing element and use that as the content.

  • parent: If provided, this is the element to search for the selector. If not provided, document is searched.
  • selector: The CSS selector to find the element.
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
constructor(existingElement: IExistingElementOptions); Component

When an element is provided, the component uses the element as the content.

  • element: The element to use.
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
constructor(newElement: IInnerHtmlOptions); Component

When inner HTML options are provided, the component uses the type and the innerHTML to create a new element to use as the content.

  • type: The tag of the HTML element to create (default 'DIV').
  • innerHtml: The innerHTML of the new element (default '').
  • id: The id of the new element (default autogenerated string).
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
constructor(newElement: IOuterHtmlOptions); Component

When outer HTML options are provided, the component uses the outerHTML to create a new element to use as the content.

  • outerHtml: The outerHTML of the new element, including the HTML for the content tag itself.
  • id: An id to override that of the new element (default whatever is defined in outerHtml).
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
constructor(newElement: string); Component

This is a shortcut for IOuterHtmlOptions. When a string is provided, the component uses the string as the outerHTML ({ outerHtml: "whatever string" }).

constructor(viewModel: TModel, options?:IComponentBindingOptions); BoundComponent

When provided with no component defining options, the component content is an empty DIV with an autogenerated id.
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

  • async: If true, after construction, render() is called asynchronously rather than the default, synchronous, call. This allows properties in the constructor of a derived class to be set before rendering.
  • defer: If true, after construction, render() is NOT called. The constructor of the derived class can call it manually (or not).
  • observeViewModel: If true, then if the view model is an observable (implements IObservable), the render() method of the component is subscribed to the observable's event handler.
  • observeAllViewModel: If true, then if the view model or any property of the view model is an observable, the render() method of the component is subscribed to the observable's event handler.
  • observeTargets: An array of observables that the render() method of the component is subscribed to.
  • observeAllTargets: An array of objects where, if the object or any property of the object is an observable, then the render() method of the component is subscribed to the observable's event handler.
  • loopItemClass: The constructor of a BoundComponent. When a loop is created, this class's inject() method is called on the resulting element, to create a loop of components rather than merely a loop of static HTML elements.
constructor(viewModel: TModel, existingElement: IExistingElementOptions & IComponentBindingOptions); BoundComponent

When lookup details are provided, the component uses the options to find an existing element and use that as the content.
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

  • parent: If provided, this is the element to search for the selector. If not provided, document is searched.
  • selector: The CSS selector to find the element.
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
  • async: If true, after construction, render() is called asynchronously rather than the default, synchronous, call. This allows properties in the constructor of a derived class to be set before rendering.
  • defer: If true, after construction, render() is NOT called. The constructor of the derived class can call it manually (or not).
  • observeViewModel: If true, then if the view model is an observable (implements IObservable), the render() method of the component is subscribed to the observable's event handler.
  • observeAllViewModel: If true, then if the view model or any property of the view model is an observable, the render() method of the component is subscribed to the observable's event handler.
  • observeTargets: An array of observables that the render() method of the component is subscribed to.
  • observeAllTargets: An array of objects where, if the object or any property of the object is an observable, then the render() method of the component is subscribed to the observable's event handler.
  • loopItemClass: The constructor of a BoundComponent. When a loop is created, this class's inject() method is called on the resulting element, to create a loop of components rather than merely a loop of static HTML elements.
constructor(viewModel: TModel, existingElement: IExistingLookupOptions & IComponentBindingOptions); BoundComponent

When an element is provided, the component uses the element as the content.
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

  • element: The element to use.
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
  • async: If true, after construction, render() is called asynchronously rather than the default, synchronous, call. This allows properties in the constructor of a derived class to be set before rendering.
  • defer: If true, after construction, render() is NOT called. The constructor of the derived class can call it manually (or not).
  • observeViewModel: If true, then if the view model is an observable (implements IObservable), the render() method of the component is subscribed to the observable's event handler.
  • observeAllViewModel: If true, then if the view model or any property of the view model is an observable, the render() method of the component is subscribed to the observable's event handler.
  • observeTargets: An array of observables that the render() method of the component is subscribed to.
  • observeAllTargets: An array of objects where, if the object or any property of the object is an observable, then the render() method of the component is subscribed to the observable's event handler.
  • loopItemClass: The constructor of a BoundComponent. When a loop is created, this class's inject() method is called on the resulting element, to create a loop of components rather than merely a loop of static HTML elements.
constructor(viewModel: TModel, newElement: IInnerHtmlOptions & IComponentBindingOptions); BoundComponent

When inner HTML options are provided, the component uses the type and the innerHTML to create a new element to use as the content.
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

  • type: The tag of the HTML element to create (default 'DIV').
  • innerHtml: The innerHTML of the new element (default '').
  • id: The id of the new element (default autogenerated string).
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
  • async: If true, after construction, render() is called asynchronously rather than the default, synchronous, call. This allows properties in the constructor of a derived class to be set before rendering.
  • defer: If true, after construction, render() is NOT called. The constructor of the derived class can call it manually (or not).
  • observeViewModel: If true, then if the view model is an observable (implements IObservable), the render() method of the component is subscribed to the observable's event handler.
  • observeAllViewModel: If true, then if the view model or any property of the view model is an observable, the render() method of the component is subscribed to the observable's event handler.
  • observeTargets: An array of observables that the render() method of the component is subscribed to.
  • observeAllTargets: An array of objects where, if the object or any property of the object is an observable, then the render() method of the component is subscribed to the observable's event handler.
  • loopItemClass: The constructor of a BoundComponent. When a loop is created, this class's inject() method is called on the resulting element, to create a loop of components rather than merely a loop of static HTML elements.
constructor(viewModel: TModel, outerElement: IOuterHtmlOptions & IComponentBindingOptions); BoundComponent

When outer HTML options are provided, the component uses the outerHTML to create a new element to use as the content.
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

  • outerHtml: The outerHTML of the new element, including the HTML for the content tag itself.
  • id: An id to override that of the new element (default whatever is defined in outerHtml).
  • properties: A list of properties to add or modify on the element found.
  • attributes: A list of attributes to add or modify on the element found.
  • async: If true, after construction, render() is called asynchronously rather than the default, synchronous, call. This allows properties in the constructor of a derived class to be set before rendering.
  • defer: If true, after construction, render() is NOT called. The constructor of the derived class can call it manually (or not).
  • observeViewModel: If true, then if the view model is an observable (implements IObservable), the render() method of the component is subscribed to the observable's event handler.
  • observeAllViewModel: If true, then if the view model or any property of the view model is an observable, the render() method of the component is subscribed to the observable's event handler.
  • observeTargets: An array of observables that the render() method of the component is subscribed to.
  • observeAllTargets: An array of objects where, if the object or any property of the object is an observable, then the render() method of the component is subscribed to the observable's event handler.
  • loopItemClass: The constructor of a BoundComponent. When a loop is created, this class's inject() method is called on the resulting element, to create a loop of components rather than merely a loop of static HTML elements.
constructor(viewModel: TModel, newElement: string); BoundComponent

This is a shortcut for IOuterHtmlOptions. When a string is provided, the component uses the string as the outerHTML ({ outerHtml: "whatever string" }).
A BoundComponent is a view. The first parameter is always the view model for the view being defined. After that comes the options.

Type definitions