ember-source
- Version 6.1.0
- Published
- 8.61 MB
- 42 dependencies
- MIT license
Install
npm i ember-source
yarn add ember-source
pnpm add ember-source
Overview
A JavaScript framework for creating ambitious web applications
Index
Namespaces
@ember/-internals/glimmer
- BootEnvironment
- Component
- Component
- escapeExpression()
- FunctionBasedHelper
- FunctionBasedHelperInstance
- getTemplate()
- getTemplates()
- hasTemplate()
- helper()
- Helper
- Helper
- htmlSafe()
- Input
- Input
- isHTMLSafe()
- LinkTo
- LinkTo
- OutletState
- OutletView
- Renderer
- renderSettled()
- RenderState
- RootTemplate
- SafeString
- setComponentManager()
- setTemplate()
- setTemplates()
- setupApplicationRegistry()
- setupEngineRegistry()
- TemplatesRegistry
- Textarea
- Textarea
- uniqueId()
@ember/-internals/metal
- activateObserver()
- addArrayObserver()
- addListener()
- addNamespace()
- addObserver()
- alias()
- arrayContentDidChange()
- arrayContentWillChange()
- ASYNC_OBSERVERS
- autoComputed()
- beginPropertyChanges()
- cached
- changeProperties()
- computed()
- ComputedDecorator
- ComputedDescriptor
- ComputedProperty
- ComputedPropertyCallback
- ComputedPropertyGetter
- ComputedPropertyObj
- ComputedPropertySetter
- DEBUG_INJECTION_FUNCTIONS
- DecoratorPropertyDescriptor
- defineDecorator()
- defineProperty()
- defineValue()
- deprecateProperty()
- descriptorForDecorator()
- descriptorForProperty()
- eachProxyArrayDidChange()
- eachProxyArrayWillChange()
- ElementDescriptor
- endPropertyChanges()
- expandProperties()
- ExtendedMethodDecorator
- findNamespace()
- findNamespaces()
- flushAsyncObservers()
- get()
- getCachedValueFor()
- getProperties()
- hasListeners()
- hasUnknownProperty()
- HasUnknownProperty
- inject()
- isClassicDecorator()
- isComputed()
- isElementDescriptor()
- isNamespaceSearchDisabled()
- libraries
- Libraries
- makeComputedDecorator()
- markObjectAsDirty()
- NAMESPACES
- NAMESPACES_BY_ID
- nativeDescDecorator()
- notifyPropertyChange()
- objectAt()
- on()
- processAllNamespaces()
- processNamespace()
- PROPERTY_DID_CHANGE
- PropertyDidChange
- PROXY_CONTENT
- removeArrayObserver()
- removeListener()
- removeNamespace()
- removeObserver()
- replace()
- replaceInNativeArray()
- revalidateObservers()
- sendEvent()
- set()
- setClassicDecorator()
- setNamespaceSearchDisabled()
- setProperties()
- setUnprocessedMixins()
- SYNC_OBSERVERS
- tagForObject()
- tagForProperty()
- tracked()
- TrackedDescriptor
- trySet()
@ember/-internals/utils
- Cache
- canInvoke()
- checkHasSuper()
- dictionary()
- enumerableSymbol()
- generateGuid()
- getDebugName
- getName()
- GUID_KEY
- guidFor()
- intern()
- isInternalSymbol()
- isObject()
- isProxy()
- lookupDescriptor()
- observerListenerMetaFor()
- ROOT()
- setListeners()
- setName()
- setObservers()
- setProxy()
- setupMandatorySetter
- setWithMandatorySetter
- symbol
- teardownMandatorySetter
- toString()
- uuid()
- wrap()
@ember/-internals/views
- ActionManager()
- ActionSupport
- ActionSupport
- addChildView()
- ChildViewsSupport
- ChildViewsSupport
- ClassNamesSupport
- ClassNamesSupport
- clearElementView()
- clearViewElement()
- ComponentLookup
- constructStyleDeprecationMessage()
- CoreView
- CoreView
- EventDispatcher
- getChildViews()
- getElementView()
- getRootViews()
- getViewBoundingClientRect()
- getViewBounds()
- getViewClientRects()
- getViewElement()
- getViewId()
- isSimpleClick()
- MUTABLE_CELL
- setElementView()
- setViewElement()
- ViewMixin
- ViewMixin
- ViewStateSupport
- ViewStateSupport
@ember/-internals/views/lib/system/utils
- addChildView()
- clearElementView()
- clearViewElement()
- collectChildViews()
- constructStyleDeprecationMessage()
- contains()
- elMatches
- getChildViews()
- getElementView()
- getRootViews()
- getViewBoundingClientRect()
- getViewBounds()
- getViewClientRects()
- getViewElement()
- getViewId()
- getViewRange()
- initChildViews()
- isSimpleClick()
- matches()
- setElementView()
- setViewElement()
@ember/debug
- assert
- captureRenderTree()
- debug
- debugFreeze
- DebugFreezeFunc
- DebugFunc
- DebugFunctionType
- debugSeal
- DebugSealFunc
- deprecate()
- deprecateFunc
- DeprecateFuncFunc
- DeprecationOptions
- getDebugFunction
- GetDebugFunction
- info
- InfoFunc
- inspect()
- isTesting()
- registerDeprecationHandler()
- registerWarnHandler
- runInDebug
- RunInDebugFunc
- setDebugFunction
- SetDebugFunction
- setTesting()
- warn
ember.Ember
- A()
- ActionHandler
- ActionHandler
- addListener
- addObserver
- Application
- Application
- ApplicationInstance
- ApplicationInstance
- Array
- Array
- ArrayProxy
- ArrayProxy
- assert
- beginPropertyChanges
- BOOTED
- cacheFor
- canInvoke
- changeProperties
- Comparable
- Comparable
- compare
- Component
- Component
- ComponentLookup
- computed
- ComputedProperty
- ComputedProperty
- Container
- Container
- ContainerDebugAdapter
- ContainerDebugAdapter
- Controller
- Controller
- controllerFor
- ControllerMixin
- ControllerMixin
- CoreObject
- CoreObject
- DataAdapter
- DataAdapter
- debug
- Debug
- defineProperty
- deprecate
- deprecateFunc
- destroy
- endPropertyChanges
- Engine
- Engine
- EngineInstance
- EngineInstance
- Enumerable
- Enumerable
- ENV
- EventDispatcher
- Evented
- Evented
- expandProperties
- FEATURES
- generateController
- generateControllerFactory
- generateGuid
- get
- getOwner()
- getProperties
- GUID_KEY
- guidFor
- Handlebars
- HashLocation
- HashLocation
- hasListeners
- Helper
- Helper
- HistoryLocation
- HistoryLocation
- HTMLBars
- inject()
- inspect
- instrument
- Instrumentation
- isArray
- isBlank
- isEmpty
- isEqual
- isNamespace
- isNone
- isPresent
- libraries
- lookup
- makeArray
- meta
- mixin
- Mixin
- Mixin
- MutableArray
- MutableArray
- MutableEnumerable
- MutableEnumerable
- Namespace
- Namespace
- NativeArray
- NativeArray
- NoneLocation
- NoneLocation
- notifyPropertyChange
- Object
- Object
- ObjectProxy
- ObjectProxy
- Observable
- Observable
- observer
- on
- onerror
- onLoad
- PromiseProxyMixin
- PromiseProxyMixin
- Registry
- Registry
- removeListener
- removeObserver
- Route
- Route
- Router
- Router
- RouterDSL
- RouterDSL
- run
- runInDebug
- runLoadHooks
- sendEvent
- Service
- Service
- set
- setOwner
- setProperties
- setupForTesting
- subscribe
- TEMPLATES
- Test
- testing
- toString()
- trySet
- typeOf
- uuid
- VERSION
- ViewUtils
- warn
- wrap
ember/barrel.Ember
- A()
- ActionHandler
- ActionHandler
- addListener
- addObserver
- Application
- Application
- ApplicationInstance
- ApplicationInstance
- Array
- Array
- ArrayProxy
- ArrayProxy
- assert
- beginPropertyChanges
- BOOTED
- cacheFor
- canInvoke
- changeProperties
- Comparable
- Comparable
- compare
- Component
- Component
- ComponentLookup
- computed
- ComputedProperty
- ComputedProperty
- Container
- Container
- ContainerDebugAdapter
- ContainerDebugAdapter
- Controller
- Controller
- controllerFor
- ControllerMixin
- ControllerMixin
- CoreObject
- CoreObject
- DataAdapter
- DataAdapter
- debug
- Debug
- defineProperty
- deprecate
- deprecateFunc
- destroy
- endPropertyChanges
- Engine
- Engine
- EngineInstance
- EngineInstance
- Enumerable
- Enumerable
- ENV
- EventDispatcher
- Evented
- Evented
- expandProperties
- FEATURES
- generateController
- generateControllerFactory
- generateGuid
- get
- getOwner()
- getProperties
- GUID_KEY
- guidFor
- Handlebars
- HashLocation
- HashLocation
- hasListeners
- Helper
- Helper
- HistoryLocation
- HistoryLocation
- HTMLBars
- inject()
- inspect
- instrument
- Instrumentation
- isArray
- isBlank
- isEmpty
- isEqual
- isNamespace
- isNone
- isPresent
- libraries
- lookup
- makeArray
- meta
- mixin
- Mixin
- Mixin
- MutableArray
- MutableArray
- MutableEnumerable
- MutableEnumerable
- Namespace
- Namespace
- NativeArray
- NativeArray
- NoneLocation
- NoneLocation
- notifyPropertyChange
- Object
- Object
- ObjectProxy
- ObjectProxy
- Observable
- Observable
- observer
- on
- onerror
- onLoad
- PromiseProxyMixin
- PromiseProxyMixin
- Registry
- Registry
- removeListener
- removeObserver
- Route
- Route
- Router
- Router
- RouterDSL
- RouterDSL
- run
- runInDebug
- runLoadHooks
- sendEvent
- Service
- Service
- set
- setOwner
- setProperties
- setupForTesting
- subscribe
- TEMPLATES
- Test
- testing
- toString()
- trySet
- typeOf
- uuid
- VERSION
- ViewUtils
- warn
- wrap
Namespaces
namespace @ember/-internals/browser-environment
module '@ember/-internals/browser-environment' {}
variable hasDOM
const hasDOM: boolean;
variable history
const history: History;
variable isChrome
const isChrome: boolean;
variable isFirefox
const isFirefox: boolean;
variable location
const location: Location;
variable userAgent
const userAgent: string;
variable window
const window: Window & typeof globalThis;
namespace @ember/-internals/browser-environment/lib/has-dom
module '@ember/-internals/browser-environment/lib/has-dom' {}
variable _default
const _default: boolean;
namespace @ember/-internals/container
module '@ember/-internals/container' {}
variable INIT_FACTORY
const INIT_FACTORY: Symbol;
function getFactoryFor
getFactoryFor: ( obj: object) => InternalFactoryManager<object, FactoryClass | object> | undefined;
function privatize
privatize: ([fullName]: TemplateStringsArray) => FullName;
function setFactoryFor
setFactoryFor: <T extends object, C extends object | FactoryClass>( obj: object, factory: InternalFactoryManager<T, C>) => void;
class Container
class Container {}
A container used to instantiate and cache objects.
Every
Container
must be associated with aRegistry
, which is referenced to determine the factory and options that should be used to instantiate objects.The public API for
Container
is still in flux and should not be considered stable.Container
constructor
constructor(registry: Registry, options?: ContainerOptions);
property cache
cache: { [key: string]: object };
property factoryManagerCache
factoryManagerCache: { [key: string]: InternalFactoryManager<object, FactoryClass>;};
property isDestroyed
isDestroyed: boolean;
property isDestroying
isDestroying: boolean;
property owner
readonly owner: InternalOwner;
property registry
readonly registry: Registry & DebugRegistry;
property validationCache
readonly validationCache: { [key: string]: boolean };
method destroy
destroy: () => void;
A depth first traversal, destroying the container, its descendant containers and all their managed objects. destroy
method factoryFor
factoryFor: (fullName: FullName) => InternalFactoryManager<object> | undefined;
Given a fullName, return the corresponding factory. The consumer of the factory is responsible for the destruction of any factory instances, as there is no way for the container to ensure instances are destroyed when it itself is destroyed.
factoryFor
Parameter fullName
{any}
Modifiers
@public
method finalizeDestroy
finalizeDestroy: () => void;
method lookup
lookup: ( fullName: string, options?: RegisterOptions) => InternalFactory<object> | object | undefined;
Given a fullName return a corresponding instance. The default behavior is for lookup to return a singleton instance. The singleton is scoped to the container, allowing multiple containers to all have their own locally scoped singletons. ```javascript let registry = new Registry(); let container = registry.container(); registry.register('api:twitter', Twitter); let twitter = container.lookup('api:twitter'); twitter instanceof Twitter; // => true // by default the container will return singletons let twitter2 = container.lookup('api:twitter'); twitter2 instanceof Twitter; // => true twitter === twitter2; //=> true ``` If singletons are not wanted, an optional flag can be provided at lookup. ```javascript let registry = new Registry(); let container = registry.container(); registry.register('api:twitter', Twitter); let twitter = container.lookup('api:twitter', { singleton: false }); let twitter2 = container.lookup('api:twitter', { singleton: false }); twitter === twitter2; //=> false ``` lookup
Parameter fullName
Parameter options
{any}
method ownerInjection
ownerInjection: () => {};
Returns an object that can be used to provide an owner to a manually created instance. ownerInjection
Returns
{ Object }
method reset
reset: (fullName: FullName) => void;
Clear either the entire cache or just the cache for a particular key.
reset
Parameter fullName
optional key to reset; if missing, resets everything
class Registry
class Registry {}
A registry used to store factory and option information keyed by type.
A
Registry
stores the factory and option information needed by aContainer
to instantiate and cache objects.The API for
Registry
is still in flux and should not be considered stable.Registry 1.11.0
constructor
constructor(options?: RegistryOptions);
property fallback
readonly fallback: Registry;
property registrations
readonly registrations: Record< string, object | InternalFactory<object, FactoryClass>>;
property resolver
resolver: Resolver;
property set
set?: <T>(obj: object, keyName: string, value: T, tolerant?: boolean) => T;
method container
container: (options?: ContainerOptions) => Container;
Creates a container based on this registry.
container
Parameter options
{Container} created container
method describe
describe: (fullName: FullName) => string;
A hook that can be used to describe how the resolver will attempt to find the factory.
For example, the default Ember
.describe
returns the full class name (including namespace) where Ember's resolver expects to find thefullName
.describe
Parameter fullName
{string} described fullName
method getOption
getOption: <K extends keyof RegisterOptions>( fullName: FullName, optionName: K) => RegisterOptions[K] | undefined;
method getOptions
getOptions: (fullName: FullName) => RegisterOptions | undefined;
method getOptionsForType
getOptionsForType: (type: string) => RegisterOptions | undefined;
method has
has: (fullName: FullName) => boolean;
Given a fullName check if the container is aware of its factory or singleton instance.
has
Parameter fullName
Parameter options
Parameter
{String} [options.source] the fullname of the request source (used for local lookups) {Boolean}
method isValidFullName
isValidFullName: (fullName: string) => fullName is `${string}:${string}`;
method knownForType
knownForType: <T extends string>(type: T) => KnownForTypeResult<T>;
knownForType
Parameter type
the type to iterate over
method makeToString
makeToString: (factory: InternalFactory<object>, fullName: FullName) => string;
makeToString
Parameter factory
Parameter fullName
{function} toString function
method normalize
normalize: (fullName: FullName) => FullName;
Normalize a fullName based on the application's conventions
normalize
Parameter fullName
{string} normalized fullName
method normalizeFullName
normalizeFullName: (fullName: FullName) => FullName;
A hook to enable custom fullName normalization behavior
normalizeFullName
Parameter fullName
{string} normalized fullName
method options
options: (fullName: FullName, options: RegisterOptions) => void;
options
Parameter fullName
Parameter options
method optionsForType
optionsForType: (type: string, options: RegisterOptions) => void;
Allow registering options for all factories of a type.
```javascript let registry = new Registry(); let container = registry.container();
// if all of type
connection
must not be singletons registry.optionsForType('connection', { singleton: false });registry.register('connection:twitter', TwitterConnection); registry.register('connection:facebook', FacebookConnection);
let twitter = container.lookup('connection:twitter'); let twitter2 = container.lookup('connection:twitter');
twitter === twitter2; // => false
let facebook = container.lookup('connection:facebook'); let facebook2 = container.lookup('connection:facebook');
facebook === facebook2; // => false ```
optionsForType
Parameter type
Parameter options
method register
register: { ( fullName: FullName, factory: object, options: RegisterOptions & { instantiate: false } ): void; <T extends object, C extends object | FactoryClass>( fullName: `${string}:${string}`, factory: InternalFactory<T, C>, options?: RegisterOptions ): void;};
Registers a factory for later injection.
Example:
```javascript let registry = new Registry();
registry.register('model:user', Person, {singleton: false }); registry.register('fruit:favorite', Orange); registry.register('communication:main', Email, {singleton: false}); ```
register
Parameter fullName
Parameter factory
Parameter options
method resolve
resolve: (fullName: FullName) => InternalFactory<object> | object | undefined;
Given a fullName return the corresponding factory.
By default
resolve
will retrieve the factory from the registry.```javascript let registry = new Registry(); registry.register('api:twitter', Twitter);
registry.resolve('api:twitter') // => Twitter ```
Optionally the registry can be provided with a custom resolver. If provided,
resolve
will first provide the custom resolver the opportunity to resolve the fullName, otherwise it will fallback to the registry.```javascript let registry = new Registry(); registry.resolver = function(fullName) { // lookup via the module system of choice };
// the twitter factory is added to the module system registry.resolve('api:twitter') // => Twitter ```
resolve
Parameter fullName
{Function} fullName's factory
method unregister
unregister: (fullName: FullName) => void;
Unregister a fullName
```javascript let registry = new Registry(); registry.register('model:user', User);
registry.resolve('model:user').create() instanceof User //=> true
registry.unregister('model:user') registry.resolve('model:user') === undefined //=> true ```
unregister
Parameter fullName
interface ResolverClass
interface ResolverClass extends Factory<Resolver>, Partial<{ new (...args: any): Resolver; }> {}
namespace @ember/-internals/container/lib/container
module '@ember/-internals/container/lib/container' {}
variable INIT_FACTORY
const INIT_FACTORY: Symbol;
function getFactoryFor
getFactoryFor: ( obj: object) => InternalFactoryManager<object, FactoryClass | object> | undefined;
function setFactoryFor
setFactoryFor: <T extends object, C extends object | FactoryClass>( obj: object, factory: InternalFactoryManager<T, C>) => void;
class Container
class Container {}
A container used to instantiate and cache objects.
Every
Container
must be associated with aRegistry
, which is referenced to determine the factory and options that should be used to instantiate objects.The public API for
Container
is still in flux and should not be considered stable.Container
constructor
constructor(registry: Registry, options?: ContainerOptions);
property cache
cache: { [key: string]: object };
property factoryManagerCache
factoryManagerCache: { [key: string]: InternalFactoryManager<object, FactoryClass>;};
property isDestroyed
isDestroyed: boolean;
property isDestroying
isDestroying: boolean;
property owner
readonly owner: InternalOwner;
property registry
readonly registry: Registry & DebugRegistry;
property validationCache
readonly validationCache: { [key: string]: boolean };
method destroy
destroy: () => void;
A depth first traversal, destroying the container, its descendant containers and all their managed objects. destroy
method factoryFor
factoryFor: (fullName: FullName) => InternalFactoryManager<object> | undefined;
Given a fullName, return the corresponding factory. The consumer of the factory is responsible for the destruction of any factory instances, as there is no way for the container to ensure instances are destroyed when it itself is destroyed.
factoryFor
Parameter fullName
{any}
Modifiers
@public
method finalizeDestroy
finalizeDestroy: () => void;
method lookup
lookup: ( fullName: string, options?: RegisterOptions) => InternalFactory<object> | object | undefined;
Given a fullName return a corresponding instance. The default behavior is for lookup to return a singleton instance. The singleton is scoped to the container, allowing multiple containers to all have their own locally scoped singletons. ```javascript let registry = new Registry(); let container = registry.container(); registry.register('api:twitter', Twitter); let twitter = container.lookup('api:twitter'); twitter instanceof Twitter; // => true // by default the container will return singletons let twitter2 = container.lookup('api:twitter'); twitter2 instanceof Twitter; // => true twitter === twitter2; //=> true ``` If singletons are not wanted, an optional flag can be provided at lookup. ```javascript let registry = new Registry(); let container = registry.container(); registry.register('api:twitter', Twitter); let twitter = container.lookup('api:twitter', { singleton: false }); let twitter2 = container.lookup('api:twitter', { singleton: false }); twitter === twitter2; //=> false ``` lookup
Parameter fullName
Parameter options
{any}
method ownerInjection
ownerInjection: () => {};
Returns an object that can be used to provide an owner to a manually created instance. ownerInjection
Returns
{ Object }
method reset
reset: (fullName: FullName) => void;
Clear either the entire cache or just the cache for a particular key.
reset
Parameter fullName
optional key to reset; if missing, resets everything
class InternalFactoryManager
class InternalFactoryManager< T extends object, C extends FactoryClass | object = FactoryClass> implements FactoryManager<T> {}
constructor
constructor( container: Container, factory: InternalFactory<T, C>, fullName: string, normalizedName: string);
property class
readonly class: DebugFactory<T, C>;
property container
readonly container: Container;
property fullName
readonly fullName: string;
property injections
injections: { [key: string]: unknown };
property normalizedName
readonly normalizedName: string;
property owner
readonly owner: InternalOwner;
method create
create: (options?: Partial<T>) => T;
method toString
toString: () => string;
interface ContainerOptions
interface ContainerOptions {}
property cache
cache?: { [key: string]: object;};
property factoryManagerCache
factoryManagerCache?: { [key: string]: InternalFactoryManager<any, any>;};
property owner
owner?: InternalOwner;
property validationCache
validationCache?: { [key: string]: boolean;};
interface LazyInjection
interface LazyInjection {}
namespace @ember/-internals/container/lib/registry
module '@ember/-internals/container/lib/registry' {}
function privatize
privatize: ([fullName]: TemplateStringsArray) => FullName;
class DebugRegistry
class DebugRegistry extends Registry {}
method normalizeInjectionsHash
normalizeInjectionsHash: (hash: { [key: string]: LazyInjection }) => Injection[];
method validateInjections
validateInjections: (injections: Injection[]) => void;
class Registry
class Registry {}
A registry used to store factory and option information keyed by type.
A
Registry
stores the factory and option information needed by aContainer
to instantiate and cache objects.The API for
Registry
is still in flux and should not be considered stable.Registry 1.11.0
constructor
constructor(options?: RegistryOptions);
property fallback
readonly fallback: Registry;
property registrations
readonly registrations: Record< string, object | InternalFactory<object, FactoryClass>>;
property resolver
resolver: Resolver;
property set
set?: <T>(obj: object, keyName: string, value: T, tolerant?: boolean) => T;
method container
container: (options?: ContainerOptions) => Container;
Creates a container based on this registry.
container
Parameter options
{Container} created container
method describe
describe: (fullName: FullName) => string;
A hook that can be used to describe how the resolver will attempt to find the factory.
For example, the default Ember
.describe
returns the full class name (including namespace) where Ember's resolver expects to find thefullName
.describe
Parameter fullName
{string} described fullName
method getOption
getOption: <K extends keyof RegisterOptions>( fullName: FullName, optionName: K) => RegisterOptions[K] | undefined;
method getOptions
getOptions: (fullName: FullName) => RegisterOptions | undefined;
method getOptionsForType
getOptionsForType: (type: string) => RegisterOptions | undefined;
method has
has: (fullName: FullName) => boolean;
Given a fullName check if the container is aware of its factory or singleton instance.
has
Parameter fullName
Parameter options
Parameter
{String} [options.source] the fullname of the request source (used for local lookups) {Boolean}
method isValidFullName
isValidFullName: (fullName: string) => fullName is `${string}:${string}`;
method knownForType
knownForType: <T extends string>(type: T) => KnownForTypeResult<T>;
knownForType
Parameter type
the type to iterate over
method makeToString
makeToString: (factory: InternalFactory<object>, fullName: FullName) => string;
makeToString
Parameter factory
Parameter fullName
{function} toString function
method normalize
normalize: (fullName: FullName) => FullName;
Normalize a fullName based on the application's conventions
normalize
Parameter fullName
{string} normalized fullName
method normalizeFullName
normalizeFullName: (fullName: FullName) => FullName;
A hook to enable custom fullName normalization behavior
normalizeFullName
Parameter fullName
{string} normalized fullName
method options
options: (fullName: FullName, options: RegisterOptions) => void;
options
Parameter fullName
Parameter options
method optionsForType
optionsForType: (type: string, options: RegisterOptions) => void;
Allow registering options for all factories of a type.
```javascript let registry = new Registry(); let container = registry.container();
// if all of type
connection
must not be singletons registry.optionsForType('connection', { singleton: false });registry.register('connection:twitter', TwitterConnection); registry.register('connection:facebook', FacebookConnection);
let twitter = container.lookup('connection:twitter'); let twitter2 = container.lookup('connection:twitter');
twitter === twitter2; // => false
let facebook = container.lookup('connection:facebook'); let facebook2 = container.lookup('connection:facebook');
facebook === facebook2; // => false ```
optionsForType
Parameter type
Parameter options
method register
register: { ( fullName: FullName, factory: object, options: RegisterOptions & { instantiate: false } ): void; <T extends object, C extends object | FactoryClass>( fullName: `${string}:${string}`, factory: InternalFactory<T, C>, options?: RegisterOptions ): void;};
Registers a factory for later injection.
Example:
```javascript let registry = new Registry();
registry.register('model:user', Person, {singleton: false }); registry.register('fruit:favorite', Orange); registry.register('communication:main', Email, {singleton: false}); ```
register
Parameter fullName
Parameter factory
Parameter options
method resolve
resolve: (fullName: FullName) => InternalFactory<object> | object | undefined;
Given a fullName return the corresponding factory.
By default
resolve
will retrieve the factory from the registry.```javascript let registry = new Registry(); registry.register('api:twitter', Twitter);
registry.resolve('api:twitter') // => Twitter ```
Optionally the registry can be provided with a custom resolver. If provided,
resolve
will first provide the custom resolver the opportunity to resolve the fullName, otherwise it will fallback to the registry.```javascript let registry = new Registry(); registry.resolver = function(fullName) { // lookup via the module system of choice };
// the twitter factory is added to the module system registry.resolve('api:twitter') // => Twitter ```
resolve
Parameter fullName
{Function} fullName's factory
method unregister
unregister: (fullName: FullName) => void;
Unregister a fullName
```javascript let registry = new Registry(); registry.register('model:user', User);
registry.resolve('model:user').create() instanceof User //=> true
registry.unregister('model:user') registry.resolve('model:user') === undefined //=> true ```
unregister
Parameter fullName
interface Injection
interface Injection {}
interface RegistryOptions
interface RegistryOptions {}
property fallback
fallback?: Registry;
property registrations
registrations?: { [key: string]: object;};
property resolver
resolver?: Resolver;
interface ResolverClass
interface ResolverClass extends Factory<Resolver>, Partial<{ new (...args: any): Resolver; }> {}
namespace @ember/-internals/deprecations
module '@ember/-internals/deprecations' {}
variable DEPRECATIONS
const DEPRECATIONS: { DEPRECATE_IMPORT_EMBER(importName: string): { options: DeprecationOptions; test: boolean; isEnabled: boolean; isRemoved: boolean; }; DEPRECATE_IMPLICIT_ROUTE_MODEL: { options: DeprecationOptions; test: boolean; isEnabled: boolean; isRemoved: boolean; }; DEPRECATE_TEMPLATE_ACTION: { options: DeprecationOptions; test: boolean; isEnabled: boolean; isRemoved: boolean; }; DEPRECATE_COMPONENT_TEMPLATE_RESOLVING: { options: DeprecationOptions; test: boolean; isEnabled: boolean; isRemoved: boolean; }; DEPRECATE_ARRAY_PROTOTYPE_EXTENSIONS: { options: DeprecationOptions; test: boolean; isEnabled: boolean; isRemoved: boolean; };};
function deprecateUntil
deprecateUntil: (message: string, deprecation: DeprecationObject) => void;
function emberVersionGte
emberVersionGte: (until: string, emberVersion?: number) => boolean;
function isRemoved
isRemoved: (options: DeprecationOptions) => boolean;
namespace @ember/-internals/environment
module '@ember/-internals/environment' {}
variable context
const context: GlobalContext;
variable ENV
const ENV: { ENABLE_OPTIONAL_FEATURES: boolean; EXTEND_PROTOTYPES: { Array: boolean }; LOG_STACKTRACE_ON_DEPRECATION: boolean; LOG_VERSION: boolean; RAISE_ON_DEPRECATION: boolean; STRUCTURED_PROFILE: boolean; _DEBUG_RENDER_TREE: boolean; _ALL_DEPRECATIONS_ENABLED: boolean; _OVERRIDE_DEPRECATION_VERSION: null; _DEFAULT_ASYNC_OBSERVERS: boolean; _NO_IMPLICIT_ROUTE_MODEL: boolean; _RERENDER_LOOP_LIMIT: number; EMBER_LOAD_HOOKS: { [hook: string]: Function[] }; FEATURES: { [feature: string]: boolean };};
The hash of environment variables used to control various configuration settings. To specify your own or override default settings, add the desired properties to a global hash named
EmberENV
(orENV
for backwards compatibility with earlier versions of Ember). TheEmberENV
hash must be created before loading Ember.EmberENV Object
Modifiers
@public
variable global
const global: any;
function getENV
getENV: () => object;
function getLookup
getLookup: () => Record<string, unknown>;
function setLookup
setLookup: (value: Record<string, unknown>) => void;
interface GlobalContext
interface GlobalContext {}
namespace @ember/-internals/environment/lib/context
module '@ember/-internals/environment/lib/context' {}
variable context
const context: GlobalContext;
function getLookup
getLookup: () => Record<string, unknown>;
function setLookup
setLookup: (value: Record<string, unknown>) => void;
interface GlobalContext
interface GlobalContext {}
namespace @ember/-internals/environment/lib/env
module '@ember/-internals/environment/lib/env' {}
variable ENV
const ENV: { ENABLE_OPTIONAL_FEATURES: boolean; EXTEND_PROTOTYPES: { Array: boolean }; LOG_STACKTRACE_ON_DEPRECATION: boolean; LOG_VERSION: boolean; RAISE_ON_DEPRECATION: boolean; STRUCTURED_PROFILE: boolean; _DEBUG_RENDER_TREE: boolean; _ALL_DEPRECATIONS_ENABLED: boolean; _OVERRIDE_DEPRECATION_VERSION: null; _DEFAULT_ASYNC_OBSERVERS: boolean; _NO_IMPLICIT_ROUTE_MODEL: boolean; _RERENDER_LOOP_LIMIT: number; EMBER_LOAD_HOOKS: { [hook: string]: Function[] }; FEATURES: { [feature: string]: boolean };};
The hash of environment variables used to control various configuration settings. To specify your own or override default settings, add the desired properties to a global hash named
EmberENV
(orENV
for backwards compatibility with earlier versions of Ember). TheEmberENV
hash must be created before loading Ember.EmberENV Object
Modifiers
@public
function getENV
getENV: () => object;
namespace @ember/-internals/environment/lib/global
module '@ember/-internals/environment/lib/global' {}
variable _default
const _default: any;
namespace @ember/-internals/error-handling
module '@ember/-internals/error-handling' {}
variable onErrorTarget
const onErrorTarget: { readonly onerror: Function | undefined };
function getDispatchOverride
getDispatchOverride: () => Function | null;
function getOnerror
getOnerror: () => Function | undefined;
function setDispatchOverride
setDispatchOverride: (handler: Function | null) => void;
function setOnerror
setOnerror: (handler: Function | undefined) => void;
namespace @ember/-internals/glimmer
module '@ember/-internals/glimmer' {}
variable Input
const Input: Input;
variable LinkTo
const LinkTo: LinkTo;
variable RootTemplate
const RootTemplate: any;
variable Textarea
const Textarea: Textarea;
function escapeExpression
escapeExpression: (string: unknown) => string;
function getTemplate
getTemplate: (name: string) => TemplateFactory | void;
function getTemplates
getTemplates: () => TemplatesRegistry;
function hasTemplate
hasTemplate: (name: string) => boolean;
function helper
helper: { <P extends DefaultPositional, N extends object, R = unknown>( helperFn: (positional: P, named: N) => R ): FunctionBasedHelper<{ Args: { Positional: P; Named: N }; Return: R }>; <S>( helperFn: ( positional: GetOr<GetOr<S, 'Args', {}>, 'Positional', DefaultPositional>, named: GetOr<GetOr<S, 'Args', {}>, 'Named', object> ) => GetOr<S, 'Return', unknown> ): FunctionBasedHelper<S>;};
In many cases it is not necessary to use the full
Helper
class. Thehelper
method create pure-function helpers without instances. For example:```app/helpers/format-currency.js import { helper } from '@ember/component/helper';
export default helper(function([cents], {currency}) { return
${currency}${cents * 0.01}
; }); ```Parameter helper
The helper function helper @ember/component/helper
1.13.0
Modifiers
@public
function htmlSafe
htmlSafe: (str: string) => SafeString;
Use this method to indicate that a string should be rendered as HTML when the string is used in a template. To say this another way, strings marked with
htmlSafe
will not be HTML escaped.A word of warning - The
htmlSafe
method does not make the string safe; it only tells the framework to treat the string as if it is safe to render as HTML. If a string contains user inputs or other untrusted data, you must sanitize the string before using thehtmlSafe
method. Otherwise your code is vulnerable to [Cross-Site Scripting](https://owasp.org/www-community/attacks/DOM_Based_XSS). There are many open source sanitization libraries to choose from, both for front end and server-side sanitization.```javascript import { htmlSafe } from '@ember/template';
const someTrustedOrSanitizedString = "Hello!"
htmlSafe(someTrustedorSanitizedString) ```
htmlSafe @ember/template
Parameter str
The string to treat as trusted. {SafeString} A string that will not be HTML escaped by Handlebars.
Modifiers
@public
function isHTMLSafe
isHTMLSafe: (str: unknown) => str is SafeString;
Detects if a string was decorated using
htmlSafe
.```javascript import { htmlSafe, isHTMLSafe } from '@ember/template';
let plainString = 'plain string'; let safeString = htmlSafe('someValue');
isHTMLSafe(plainString); // false isHTMLSafe(safeString); // true ```
isHTMLSafe @ember/template {Boolean}
true
if the string was decorated withhtmlSafe
,false
otherwise.Modifiers
@public
function renderSettled
renderSettled: () => RSVP.Promise<void>;
function setComponentManager
setComponentManager: <T extends object>( manager: (owner: InternalOwner) => ComponentManager<unknown>, obj: T) => T;
Associate a class with a component manager (an object that is responsible for coordinating the lifecycle events that occurs when invoking, rendering and re-rendering a component).
setComponentManager
Parameter factory
a function to create the owner for an object
Parameter obj
the object to associate with the componetn manager {Object} the same object passed in
Modifiers
@public
function setTemplate
setTemplate: (name: string, template: TemplateFactory) => TemplateFactory;
function setTemplates
setTemplates: (templates: TemplatesRegistry) => void;
function setupApplicationRegistry
setupApplicationRegistry: (registry: Registry) => void;
function setupEngineRegistry
setupEngineRegistry: (registry: Registry) => void;
function uniqueId
uniqueId: () => string;
class Component
class Component<S = unknown> extends Component_base implements PropertyDidChange {}
property [DIRTY_TAG]
[DIRTY_TAG]: DirtyableTag;
property [IS_DISPATCHING_ATTRS]
[IS_DISPATCHING_ATTRS]: boolean;
property ariaRole
ariaRole?: string;
The WAI-ARIA role of the control represented by this view. For example, a button may have a role of type 'button', or a pane may have a role of type 'alertdialog'. This property is used by assistive software to help visually challenged users navigate rich web applications.
The full list of valid WAI-ARIA roles is available at: [https://www.w3.org/TR/wai-aria/#roles_categorization](https://www.w3.org/TR/wai-aria/#roles_categorization)
ariaRole String undefined
Modifiers
@public
property attributeBindings
attributeBindings?: string[];
property isComponent
isComponent: boolean;
property isComponentFactory
static isComponentFactory: boolean;
property layout
layout?: any;
Layout can be used to wrap content in a component. layout Function
Modifiers
@public
property layoutName
layoutName?: string;
The name of the layout to lookup if no layout is provided. By default
Component
will lookup a template with this name inEmber.TEMPLATES
(a shared global object). layoutName String undefined
property positionalParams
static positionalParams: string | string[];
Enables components to take a list of parameters as arguments. For example, a component that takes two parameters with the names
name
andage
:```app/components/my-component.js import Component from '@ember/component';
let MyComponent = Component.extend();
MyComponent.reopenClass({ positionalParams: ['name', 'age'] });
export default MyComponent; ```
It can then be invoked like this:
```hbs {{my-component "John" 38}} ```
The parameters can be referred to just like named parameters:
```hbs Name: {{name}}, Age: {{age}}. ```
Using a string instead of an array allows for an arbitrary number of parameters:
```app/components/my-component.js import Component from '@ember/component';
let MyComponent = Component.extend();
MyComponent.reopenClass({ positionalParams: 'names' });
export default MyComponent; ```
It can then be invoked like this:
```hbs {{my-component "John" "Michael" "Scott"}} ``` The parameters can then be referred to by enumerating over the list:
```hbs {{#each names as |name|}}{{name}}{{/each}} ```
positionalParams 1.13.0
Modifiers
@public
method [PROPERTY_DID_CHANGE]
[PROPERTY_DID_CHANGE]: (key: string, value?: unknown) => void;
method getAttr
getAttr: (key: string) => unknown;
method init
init: (properties?: object | undefined) => void;
method on
on: { <Target>( name: string, target: Target, method: string | ((this: Target, ...args: any[]) => void) ): this; (name: string, method: string | ((...args: any[]) => void)): this;};
method readDOMAttr
readDOMAttr: (name: string) => any;
Normally, Ember's component model is "write-only". The component takes a bunch of attributes that it got passed in, and uses them to render its template.
One nice thing about this model is that if you try to set a value to the same thing as last time, Ember (through HTMLBars) will avoid doing any work on the DOM.
This is not just a performance optimization. If an attribute has not changed, it is important not to clobber the element's "hidden state". For example, if you set an input's
value
to the same value as before, it will clobber selection state and cursor position. In other words, setting an attribute is not **always** idempotent.This method provides a way to read an element's attribute and also update the last value Ember knows about at the same time. This makes setting an attribute idempotent.
In particular, what this means is that if you get an
<input>
element'svalue
attribute and then re-render the template with the same value, it will avoid clobbering the cursor and selection position. Since most attribute sets are idempotent in the browser, you typically can get away with reading attributes using jQuery, but the most reliable way to do so is through this method. readDOMAttrParameter name
the name of the attribute String
Modifiers
@public
method toString
static toString: () => string;
class FunctionBasedHelperInstance
abstract class FunctionBasedHelperInstance<S> extends Helper<S> {}
class Helper
class Helper<S = unknown> extends FrameworkObject {}
property [IS_CLASSIC_HELPER]
static [IS_CLASSIC_HELPER]: boolean;
property [RECOMPUTE_TAG]
[RECOMPUTE_TAG]: DirtyableTag;
property helper
static helper: { <P extends DefaultPositional, N extends object, R = unknown>( helperFn: (positional: P, named: N) => R ): FunctionBasedHelper<{ Args: { Positional: P; Named: N }; Return: R }>; <S>( helperFn: ( positional: GetOr< GetOr<S, 'Args', {}>, 'Positional', DefaultPositional >, named: GetOr<GetOr<S, 'Args', {}>, 'Named', object> ) => GetOr<S, 'Return', unknown> ): FunctionBasedHelper<S>;};
Deprecated
property isHelperFactory
static isHelperFactory: boolean;
method init
init: (properties: object | undefined) => void;
method recompute
recompute: () => void;
On a class-based helper, it may be useful to force a recomputation of that helpers value. This is akin to
rerender
on a component.For example, this component will rerender when the
currentUser
on a session service changes:```app/helpers/current-user-email.js import Helper from '@ember/component/helper' import { service } from '@ember/service' import { observer } from '@ember/object'
export default Helper.extend({ session: service(),
onNewUser: observer('session.currentUser', function() { this.recompute(); }),
compute() { return this.get('session.currentUser.email'); } }); ```
recompute
1.13.0
Modifiers
@public
class OutletView
class OutletView {}
constructor
constructor( _environment: BootEnvironment, owner: InternalOwner, template: Template, namespace: any);
property namespace
namespace: any;
property owner
owner: InternalOwner;
property state
state: OutletDefinitionState;
property template
template: Template;
method appendTo
appendTo: (selector: string | SimpleElement) => void;
method create
static create: (options: { environment: BootEnvironment; application: InternalOwner; template: TemplateFactory;}) => OutletView;
method destroy
destroy: () => void;
method extend
static extend: (injections: any) => typeof OutletView;
method reopenClass
static reopenClass: (injections: any) => void;
method rerender
rerender: () => void;
method setOutletState
setOutletState: (state: OutletState) => void;
class Renderer
class Renderer {}
constructor
constructor( owner: InternalOwner, document: SimpleDocument, env: { isInteractive: boolean; hasDOM: boolean }, rootTemplate: TemplateFactory, viewRegistry: ViewRegistry, builder?: any);
property debugRenderTree
readonly debugRenderTree: DebugRenderTree;
method appendOutletView
appendOutletView: (view: OutletView, target: SimpleElement) => void;
method appendTo
appendTo: (view: Component, target: SimpleElement) => void;
method cleanupRootFor
cleanupRootFor: (view: unknown) => void;
method create
static create: (props: { _viewRegistry: any }) => Renderer;
method createElement
createElement: (tagName: string) => SimpleElement;
method destroy
destroy: () => void;
method getBounds
getBounds: (view: View) => { parentElement: SimpleElement; firstNode: SimpleNode; lastNode: SimpleNode;};
method getElement
getElement: (view: View) => Nullable<Element>;
method register
register: (view: any) => void;
method remove
remove: (view: Component) => void;
method rerender
rerender: () => void;
method unregister
unregister: (view: any) => void;
class SafeString
class SafeString implements GlimmerSafeString {}
A wrapper around a string that has been marked as safe ("trusted"). **When rendered in HTML, Ember will not perform any escaping.**
Note:
1. This does not *make* the string safe; it means that some code in your application has *marked* it as safe using the
htmlSafe()
function.2. The only public API for getting a
SafeString
is callinghtmlSafe()
. It is *not* user-constructible.If a string contains user inputs or other untrusted data, you must sanitize the string before using the
htmlSafe
method. Otherwise your code is vulnerable to [Cross-Site Scripting][xss]. There are many open source sanitization libraries to choose from, both for front end and server-side sanitization.[xss]: https://owasp.org/www-community/attacks/DOM_Based_XSS
```javascript import { htmlSafe } from '@ember/template';
let someTrustedOrSanitizedString = "Hello!"
htmlSafe(someTrustedorSanitizedString); ```
@ember/template SafeString 4.12.0
Modifiers
@public
constructor
constructor(string: string);
method toHTML
toHTML: () => string;
Get the wrapped string as HTML to use without escaping.
toHTML
Returns
{String} the trusted string, without any escaping applied
Modifiers
@public
method toString
toString: () => string;
Get the string back to use as a string.
toString
Returns
{String} The string marked as trusted
Modifiers
@public
interface BootEnvironment
interface BootEnvironment {}
property hasDOM
hasDOM: boolean;
property isInteractive
isInteractive: boolean;
property options
options: BootOptions;
interface Component
interface Component<S = unknown> extends CoreView, ChildViewsSupport, ViewStateSupport, ClassNamesSupport, TargetActionSupport, ActionSupport, ViewMixin, ComponentMethods {}
A component is a reusable UI element that consists of a
.hbs
template and an optional JavaScript class that defines its behavior. For example, someone might make abutton
in the template and handle the click behavior in the JavaScript file that shares the same name as the template.Components are broken down into two categories:
- Components _without_ JavaScript, that are based only on a template. These are called Template-only or TO components. - Components _with_ JavaScript, which consist of a template and a backing class.
Ember ships with two types of JavaScript classes for components:
1. Glimmer components, imported from
@glimmer/component
, which are the default component's for Ember Octane (3.15) and more recent editions. 2. Classic components, imported from@ember/component
, which were the default for older editions of Ember (pre 3.15).Below is the documentation for Classic components. If you are looking for the API documentation for Template-only or Glimmer components, it is [available here](/ember/release/modules/@glimmer%2Fcomponent).
## Defining a Classic Component
If you want to customize the component in order to handle events, transform arguments or maintain internal state, you implement a subclass of
Component
.One example is to add computed properties to your component:
```app/components/person-profile.js import Component from '@ember/component';
export default Component.extend({ displayName: computed('person.title', 'person.firstName', 'person.lastName', function() { let { title, firstName, lastName } = this.person;
if (title) { return
${title} ${lastName}
; } else { return${firstName} ${lastName}
; } }) }); ```And then use it in the component's template:
```app/templates/components/person-profile.hbs {{this.displayName}} {{yield}} ```
## Customizing a Classic Component's HTML Element in JavaScript
### HTML Tag
The default HTML tag name used for a component's HTML representation is
div
. This can be customized by setting thetagName
property.Consider the following component class:
```app/components/emphasized-paragraph.js import Component from '@ember/component';
export default Component.extend({ tagName: 'em' }); ```
When invoked, this component would produce output that looks something like this:
```html ```
### HTML
class
AttributeThe HTML
class
attribute of a component's tag can be set by providing aclassNames
property that is set to an array of strings:```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNames: ['my-class', 'my-other-class'] }); ```
Invoking this component will produce output that looks like this:
```html ```
class
attribute values can also be set by providing aclassNameBindings
property set to an array of properties names for the component. The return value of these properties will be added as part of the value for the components'sclass
attribute. These properties can be computed properties:```app/components/my-widget.js import Component from '@ember/component'; import { computed } from '@ember/object';
export default Component.extend({ classNames: ['my-class', 'my-other-class'], classNameBindings: ['propertyA', 'propertyB'],
propertyA: 'from-a', propertyB: computed(function() { if (someLogic) { return 'from-b'; } }) }); ```
Invoking this component will produce HTML that looks like:
```html ```
Note that
classNames
andclassNameBindings
is in addition to theclass
attribute passed with the angle bracket invocation syntax. Therefore, if this component was invoked like so:```handlebars ```
The resulting HTML will look similar to this:
```html ```
If the value of a class name binding returns a boolean the property name itself will be used as the class name if the property is true. The class name will not be added if the value is
false
orundefined
.```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['hovered'],
hovered: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
### Custom Class Names for Boolean Values
When using boolean class name bindings you can supply a string value other than the property name for use as the
class
HTML attribute by appending the preferred value after a ":" character when defining the binding:```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['awesome:so-very-cool'],
awesome: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
Boolean value class name bindings whose property names are in a camelCase-style format will be converted to a dasherized format:
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['isUrgent'],
isUrgent: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
Class name bindings can also refer to object values that are found by traversing a path relative to the component itself:
```app/components/my-widget.js import Component from '@ember/component'; import EmberObject from '@ember/object';
export default Component.extend({ classNameBindings: ['messages.empty'],
messages: EmberObject.create({ empty: true }) }); ```
Invoking this component will produce HTML that looks like:
```html ```
If you want to add a class name for a property which evaluates to true and and a different class name if it evaluates to false, you can pass a binding like this:
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['isEnabled:enabled:disabled'], isEnabled: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
When isEnabled is
false
, the resulting HTML representation looks like this:```html ```
This syntax offers the convenience to add a class if a property is
false
:```app/components/my-widget.js import Component from '@ember/component';
// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false export default Component.extend({ classNameBindings: ['isEnabled::disabled'], isEnabled: true }); ```
Invoking this component when the
isEnabled
property is true will produce HTML that looks like:```html ```
Invoking it when the
isEnabled
property on the component isfalse
will produce HTML that looks like:```html ```
Updates to the value of a class name binding will result in automatic update of the HTML
class
attribute in the component's rendered HTML representation. If the value becomesfalse
orundefined
the class name will be removed.Both
classNames
andclassNameBindings
are concatenated properties. See [EmberObject](/ember/release/classes/EmberObject) documentation for more information about concatenated properties.### Other HTML Attributes
The HTML attribute section of a component's tag can be set by providing an
attributeBindings
property set to an array of property names on the component. The return value of these properties will be used as the value of the component's HTML associated attribute:```app/components/my-anchor.js import Component from '@ember/component';
export default Component.extend({ tagName: 'a', attributeBindings: ['href'],
href: 'http://google.com' }); ```
Invoking this component will produce HTML that looks like:
```html ```
One property can be mapped on to another by placing a ":" between the source property and the destination property:
```app/components/my-anchor.js import Component from '@ember/component';
export default Component.extend({ tagName: 'a', attributeBindings: ['url:href'],
url: 'http://google.com' }); ```
Invoking this component will produce HTML that looks like:
```html ```
HTML attributes passed with angle bracket invocations will take precedence over those specified in
attributeBindings
. Therefore, if this component was invoked like so:```handlebars <MyAnchor href="http://bing.com" @url="http://google.com" /> ```
The resulting HTML will looks like this:
```html ```
Note that the
href
attribute is ultimately set tohttp://bing.com
, despite it having attribute binidng to theurl
property, which was set tohttp://google.com
.Namespaced attributes (e.g.
xlink:href
) are supported, but have to be mapped, since:
is not a valid character for properties in Javascript:```app/components/my-use.js import Component from '@ember/component';
export default Component.extend({ tagName: 'use', attributeBindings: ['xlinkHref:xlink:href'],
xlinkHref: '#triangle' }); ```
Invoking this component will produce HTML that looks like:
```html <use xlink:href="#triangle"> ```
If the value of a property monitored by
attributeBindings
is a boolean, the attribute will be present or absent depending on the value:```app/components/my-text-input.js import Component from '@ember/component';
export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'],
disabled: false }); ```
Invoking this component will produce HTML that looks like:
```html ```
attributeBindings
can refer to computed properties:```app/components/my-text-input.js import Component from '@ember/component'; import { computed } from '@ember/object';
export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'],
disabled: computed(function() { if (someLogic) { return true; } else { return false; } }) }); ```
To prevent setting an attribute altogether, use
null
orundefined
as the value of the property used inattributeBindings
:```app/components/my-text-input.js import Component from '@ember/component';
export default Component.extend({ tagName: 'form', attributeBindings: ['novalidate'], novalidate: null }); ```
Updates to the property of an attribute binding will result in automatic update of the HTML attribute in the component's HTML output.
attributeBindings
is a concatenated property. See [EmberObject](/ember/release/classes/EmberObject) documentation for more information about concatenated properties.## Layouts
The
layout
property can be used to dynamically specify a template associated with a component class, instead of relying on Ember to link together a component class and a template based on file names.In general, applications should not use this feature, but it's commonly used in addons for historical reasons.
The
layout
property should be set to the default export of a template module, which is the name of a template file without the.hbs
extension.```app/templates/components/person-profile.hbs Person's Title {{yield}} ```
```app/components/person-profile.js import Component from '@ember/component'; import layout from '../templates/components/person-profile';
export default Component.extend({ layout }); ```
If you invoke the component:
```handlebars Chief Basket Weaver Fisherman Industries ```
or
```handlebars {{#person-profile}} Chief Basket Weaver Fisherman Industries {{/person-profile}} ```
It will result in the following HTML output:
```html Person's Title Chief Basket Weaver Fisherman Industries ```
## Handling Browser Events
There are two ways to handle user-initiated events:
### Using the
on
modifier to capture browser eventsIn a component's template, you can attach an event handler to any element with the
on
modifier:```handlebars <button {{on 'click' this.doSomething}} /> ```
This will call the function on your component:
```js import Component from '@ember/component';
export default class ExampleComponent extends Component { doSomething = (event) => { //
event
is the native click Event console.log('clicked on the button'); }; }); ```See the [Guide on Component event handlers](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_html-modifiers-and-actions) and the [API docs for
on
](../Ember.Templates.helpers/methods/on?anchor=on) for more details.### Event Handler Methods
Components can also respond to user-initiated events by implementing a method that matches the event name. This approach is appropriate when the same event should be handled by all instances of the same component.
An event object will be passed as the argument to the event handler method.
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ click(event) { //
event.target
is either the component's element or one of its children let tag = event.target.tagName.toLowerCase(); console.log('clicked on a<${tag}>
HTML element!'); } }); ```In this example, whenever the user clicked anywhere inside the component, it will log a message to the console.
It is possible to handle event types other than
click
by implementing the following event handler methods. In addition, custom events can be registered by usingApplication.customEvents
.Touch events:
touchStart
touchMove
touchEnd
touchCancel
Keyboard events:
keyDown
keyUp
keyPress
Mouse events:
mouseDown
mouseUp
contextMenu
click
doubleClick
focusIn
focusOut
Form events:
submit
change
focusIn
focusOut
input
Drag and drop events:
dragStart
drag
dragEnter
dragLeave
dragOver
dragEnd
drop
Component Ember.CoreView Ember.TargetActionSupport Ember.ClassNamesSupport Ember.ActionSupport Ember.ViewMixin Ember.ViewStateSupport
Modifiers
@public
interface Helper
interface Helper<S = unknown> {}
Ember Helpers are functions that can compute values, and are used in templates. For example, this code calls a helper named
format-currency
:```app/templates/application.hbs <Cost @cents={{230}} /> ```
```app/components/cost.hbs {{format-currency currency="$"}} ```
Additionally a helper can be called as a nested helper. In this example, we show the formatted currency value if the
showMoney
named argument is truthy.```handlebars {{if (format-currency currency="$")}} ```
Helpers defined using a class must provide a
compute
function. For example:```app/helpers/format-currency.js import Helper from '@ember/component/helper';
export default class extends Helper { compute([cents], { currency }) { return
${currency}${cents * 0.01}
; } } ```Each time the input to a helper changes, the
compute
function will be called again.As instances, these helpers also have access to the container and will accept injected dependencies.
Additionally, class helpers can call
recompute
to force a new computation.Helper CoreObject
1.13.0
Modifiers
@public
method compute
compute: (positional: Positional<S>, named: Named<S>) => Return<S>;
Override this function when writing a class-based helper.
compute
Parameter positional
The positional arguments to the helper
Parameter named
The named arguments to the helper
1.13.0
Modifiers
@public
interface Input
interface Input extends Opaque<'component:input'>, OpaqueInternalComponentConstructor {}
interface LinkTo
interface LinkTo extends Opaque<'component:link-to'>, OpaqueInternalComponentConstructor {}
interface OutletState
interface OutletState {}
property outlets
outlets: { main: OutletState | undefined;};
Represents what, if any, should be rendered into the next {{outlet}} found at this level.
This used to be a dictionary of children outlets, including the {{outlet}} "main" outlet any {{outlet "named"}} named outlets. Since named outlets are not a thing anymore, this can now just be a single
child
.
property render
render: RenderState | undefined;
Represents what was rendered into this outlet.
property wasUsed
wasUsed?: undefined;
Deprecated
This tracks whether this outlet state actually made it onto the page somewhere. This was more of a problem when you can declare named outlets left and right, and anything can render into anywhere else. We want to warn users when you tried to render into somewhere that does not exist, but we don't know what named outlets exists until after we have rendered everything, so this was used to track these orphan renders.
This can still happen, if, according to the router, a route is active and so its template should be rendered, but the parent template is missing the
{{outlet}}
keyword, or that it was hidden by an{{#if}}
or something. I guess that is considered valid, because nothing checks for this anymore. seems valid for the parent to decide not to render a child template?
interface RenderState
interface RenderState {}
property controller
controller: unknown;
The controller (the self of the outlet component)
property into
into: undefined;
Deprecated
This used to specify "which parent route to render into", which is not a thing anymore.
property model
model: unknown;
The model (the resolved value of the model hook)
property name
name: string;
The name of the route/template
property outlet
outlet: 'main';
Deprecated
This used to specify "which named outlet in the parent template to render into", which is not a thing anymore.
property owner
owner: InternalOwner;
This is usually inherited from the parent (all the way up to the app instance). However, engines uses this to swap out the owner when crossing a mount point.
property template
template: Template | undefined;
template (the layout of the outlet component)
interface TemplatesRegistry
interface TemplatesRegistry {}
index signature
[name: string]: TemplateFactory;
interface Textarea
interface Textarea extends Opaque<'component:textarea'>, OpaqueInternalComponentConstructor {}
type FunctionBasedHelper
type FunctionBasedHelper<S> = abstract new () => FunctionBasedHelperInstance<S>;
The type of a function-based helper.
This is *not* user-constructible: it is exported only so that the type returned by the
helper
function can be named (and indeed can be exported likeexport default helper(...)
safely).
namespace @ember/-internals/glimmer/lib/component
module '@ember/-internals/glimmer/lib/component' {}
class Component
class Component<S = unknown> extends Component_base implements PropertyDidChange {}
property [DIRTY_TAG]
[DIRTY_TAG]: DirtyableTag;
property [IS_DISPATCHING_ATTRS]
[IS_DISPATCHING_ATTRS]: boolean;
property ariaRole
ariaRole?: string;
The WAI-ARIA role of the control represented by this view. For example, a button may have a role of type 'button', or a pane may have a role of type 'alertdialog'. This property is used by assistive software to help visually challenged users navigate rich web applications.
The full list of valid WAI-ARIA roles is available at: [https://www.w3.org/TR/wai-aria/#roles_categorization](https://www.w3.org/TR/wai-aria/#roles_categorization)
ariaRole String undefined
Modifiers
@public
property attributeBindings
attributeBindings?: string[];
property isComponent
isComponent: boolean;
property isComponentFactory
static isComponentFactory: boolean;
property layout
layout?: any;
Layout can be used to wrap content in a component. layout Function
Modifiers
@public
property layoutName
layoutName?: string;
The name of the layout to lookup if no layout is provided. By default
Component
will lookup a template with this name inEmber.TEMPLATES
(a shared global object). layoutName String undefined
property positionalParams
static positionalParams: string | string[];
Enables components to take a list of parameters as arguments. For example, a component that takes two parameters with the names
name
andage
:```app/components/my-component.js import Component from '@ember/component';
let MyComponent = Component.extend();
MyComponent.reopenClass({ positionalParams: ['name', 'age'] });
export default MyComponent; ```
It can then be invoked like this:
```hbs {{my-component "John" 38}} ```
The parameters can be referred to just like named parameters:
```hbs Name: {{name}}, Age: {{age}}. ```
Using a string instead of an array allows for an arbitrary number of parameters:
```app/components/my-component.js import Component from '@ember/component';
let MyComponent = Component.extend();
MyComponent.reopenClass({ positionalParams: 'names' });
export default MyComponent; ```
It can then be invoked like this:
```hbs {{my-component "John" "Michael" "Scott"}} ``` The parameters can then be referred to by enumerating over the list:
```hbs {{#each names as |name|}}{{name}}{{/each}} ```
positionalParams 1.13.0
Modifiers
@public
method [PROPERTY_DID_CHANGE]
[PROPERTY_DID_CHANGE]: (key: string, value?: unknown) => void;
method getAttr
getAttr: (key: string) => unknown;
method init
init: (properties?: object | undefined) => void;
method on
on: { <Target>( name: string, target: Target, method: string | ((this: Target, ...args: any[]) => void) ): this; (name: string, method: string | ((...args: any[]) => void)): this;};
method readDOMAttr
readDOMAttr: (name: string) => any;
Normally, Ember's component model is "write-only". The component takes a bunch of attributes that it got passed in, and uses them to render its template.
One nice thing about this model is that if you try to set a value to the same thing as last time, Ember (through HTMLBars) will avoid doing any work on the DOM.
This is not just a performance optimization. If an attribute has not changed, it is important not to clobber the element's "hidden state". For example, if you set an input's
value
to the same value as before, it will clobber selection state and cursor position. In other words, setting an attribute is not **always** idempotent.This method provides a way to read an element's attribute and also update the last value Ember knows about at the same time. This makes setting an attribute idempotent.
In particular, what this means is that if you get an
<input>
element'svalue
attribute and then re-render the template with the same value, it will avoid clobbering the cursor and selection position. Since most attribute sets are idempotent in the browser, you typically can get away with reading attributes using jQuery, but the most reliable way to do so is through this method. readDOMAttrParameter name
the name of the attribute String
Modifiers
@public
method toString
static toString: () => string;
interface Component
interface Component<S = unknown> extends CoreView, ChildViewsSupport, ViewStateSupport, ClassNamesSupport, TargetActionSupport, ActionSupport, ViewMixin, ComponentMethods {}
A component is a reusable UI element that consists of a
.hbs
template and an optional JavaScript class that defines its behavior. For example, someone might make abutton
in the template and handle the click behavior in the JavaScript file that shares the same name as the template.Components are broken down into two categories:
- Components _without_ JavaScript, that are based only on a template. These are called Template-only or TO components. - Components _with_ JavaScript, which consist of a template and a backing class.
Ember ships with two types of JavaScript classes for components:
1. Glimmer components, imported from
@glimmer/component
, which are the default component's for Ember Octane (3.15) and more recent editions. 2. Classic components, imported from@ember/component
, which were the default for older editions of Ember (pre 3.15).Below is the documentation for Classic components. If you are looking for the API documentation for Template-only or Glimmer components, it is [available here](/ember/release/modules/@glimmer%2Fcomponent).
## Defining a Classic Component
If you want to customize the component in order to handle events, transform arguments or maintain internal state, you implement a subclass of
Component
.One example is to add computed properties to your component:
```app/components/person-profile.js import Component from '@ember/component';
export default Component.extend({ displayName: computed('person.title', 'person.firstName', 'person.lastName', function() { let { title, firstName, lastName } = this.person;
if (title) { return
${title} ${lastName}
; } else { return${firstName} ${lastName}
; } }) }); ```And then use it in the component's template:
```app/templates/components/person-profile.hbs {{this.displayName}} {{yield}} ```
## Customizing a Classic Component's HTML Element in JavaScript
### HTML Tag
The default HTML tag name used for a component's HTML representation is
div
. This can be customized by setting thetagName
property.Consider the following component class:
```app/components/emphasized-paragraph.js import Component from '@ember/component';
export default Component.extend({ tagName: 'em' }); ```
When invoked, this component would produce output that looks something like this:
```html ```
### HTML
class
AttributeThe HTML
class
attribute of a component's tag can be set by providing aclassNames
property that is set to an array of strings:```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNames: ['my-class', 'my-other-class'] }); ```
Invoking this component will produce output that looks like this:
```html ```
class
attribute values can also be set by providing aclassNameBindings
property set to an array of properties names for the component. The return value of these properties will be added as part of the value for the components'sclass
attribute. These properties can be computed properties:```app/components/my-widget.js import Component from '@ember/component'; import { computed } from '@ember/object';
export default Component.extend({ classNames: ['my-class', 'my-other-class'], classNameBindings: ['propertyA', 'propertyB'],
propertyA: 'from-a', propertyB: computed(function() { if (someLogic) { return 'from-b'; } }) }); ```
Invoking this component will produce HTML that looks like:
```html ```
Note that
classNames
andclassNameBindings
is in addition to theclass
attribute passed with the angle bracket invocation syntax. Therefore, if this component was invoked like so:```handlebars ```
The resulting HTML will look similar to this:
```html ```
If the value of a class name binding returns a boolean the property name itself will be used as the class name if the property is true. The class name will not be added if the value is
false
orundefined
.```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['hovered'],
hovered: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
### Custom Class Names for Boolean Values
When using boolean class name bindings you can supply a string value other than the property name for use as the
class
HTML attribute by appending the preferred value after a ":" character when defining the binding:```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['awesome:so-very-cool'],
awesome: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
Boolean value class name bindings whose property names are in a camelCase-style format will be converted to a dasherized format:
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['isUrgent'],
isUrgent: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
Class name bindings can also refer to object values that are found by traversing a path relative to the component itself:
```app/components/my-widget.js import Component from '@ember/component'; import EmberObject from '@ember/object';
export default Component.extend({ classNameBindings: ['messages.empty'],
messages: EmberObject.create({ empty: true }) }); ```
Invoking this component will produce HTML that looks like:
```html ```
If you want to add a class name for a property which evaluates to true and and a different class name if it evaluates to false, you can pass a binding like this:
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ classNameBindings: ['isEnabled:enabled:disabled'], isEnabled: true }); ```
Invoking this component will produce HTML that looks like:
```html ```
When isEnabled is
false
, the resulting HTML representation looks like this:```html ```
This syntax offers the convenience to add a class if a property is
false
:```app/components/my-widget.js import Component from '@ember/component';
// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false export default Component.extend({ classNameBindings: ['isEnabled::disabled'], isEnabled: true }); ```
Invoking this component when the
isEnabled
property is true will produce HTML that looks like:```html ```
Invoking it when the
isEnabled
property on the component isfalse
will produce HTML that looks like:```html ```
Updates to the value of a class name binding will result in automatic update of the HTML
class
attribute in the component's rendered HTML representation. If the value becomesfalse
orundefined
the class name will be removed.Both
classNames
andclassNameBindings
are concatenated properties. See [EmberObject](/ember/release/classes/EmberObject) documentation for more information about concatenated properties.### Other HTML Attributes
The HTML attribute section of a component's tag can be set by providing an
attributeBindings
property set to an array of property names on the component. The return value of these properties will be used as the value of the component's HTML associated attribute:```app/components/my-anchor.js import Component from '@ember/component';
export default Component.extend({ tagName: 'a', attributeBindings: ['href'],
href: 'http://google.com' }); ```
Invoking this component will produce HTML that looks like:
```html ```
One property can be mapped on to another by placing a ":" between the source property and the destination property:
```app/components/my-anchor.js import Component from '@ember/component';
export default Component.extend({ tagName: 'a', attributeBindings: ['url:href'],
url: 'http://google.com' }); ```
Invoking this component will produce HTML that looks like:
```html ```
HTML attributes passed with angle bracket invocations will take precedence over those specified in
attributeBindings
. Therefore, if this component was invoked like so:```handlebars <MyAnchor href="http://bing.com" @url="http://google.com" /> ```
The resulting HTML will looks like this:
```html ```
Note that the
href
attribute is ultimately set tohttp://bing.com
, despite it having attribute binidng to theurl
property, which was set tohttp://google.com
.Namespaced attributes (e.g.
xlink:href
) are supported, but have to be mapped, since:
is not a valid character for properties in Javascript:```app/components/my-use.js import Component from '@ember/component';
export default Component.extend({ tagName: 'use', attributeBindings: ['xlinkHref:xlink:href'],
xlinkHref: '#triangle' }); ```
Invoking this component will produce HTML that looks like:
```html <use xlink:href="#triangle"> ```
If the value of a property monitored by
attributeBindings
is a boolean, the attribute will be present or absent depending on the value:```app/components/my-text-input.js import Component from '@ember/component';
export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'],
disabled: false }); ```
Invoking this component will produce HTML that looks like:
```html ```
attributeBindings
can refer to computed properties:```app/components/my-text-input.js import Component from '@ember/component'; import { computed } from '@ember/object';
export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'],
disabled: computed(function() { if (someLogic) { return true; } else { return false; } }) }); ```
To prevent setting an attribute altogether, use
null
orundefined
as the value of the property used inattributeBindings
:```app/components/my-text-input.js import Component from '@ember/component';
export default Component.extend({ tagName: 'form', attributeBindings: ['novalidate'], novalidate: null }); ```
Updates to the property of an attribute binding will result in automatic update of the HTML attribute in the component's HTML output.
attributeBindings
is a concatenated property. See [EmberObject](/ember/release/classes/EmberObject) documentation for more information about concatenated properties.## Layouts
The
layout
property can be used to dynamically specify a template associated with a component class, instead of relying on Ember to link together a component class and a template based on file names.In general, applications should not use this feature, but it's commonly used in addons for historical reasons.
The
layout
property should be set to the default export of a template module, which is the name of a template file without the.hbs
extension.```app/templates/components/person-profile.hbs Person's Title {{yield}} ```
```app/components/person-profile.js import Component from '@ember/component'; import layout from '../templates/components/person-profile';
export default Component.extend({ layout }); ```
If you invoke the component:
```handlebars Chief Basket Weaver Fisherman Industries ```
or
```handlebars {{#person-profile}} Chief Basket Weaver Fisherman Industries {{/person-profile}} ```
It will result in the following HTML output:
```html Person's Title Chief Basket Weaver Fisherman Industries ```
## Handling Browser Events
There are two ways to handle user-initiated events:
### Using the
on
modifier to capture browser eventsIn a component's template, you can attach an event handler to any element with the
on
modifier:```handlebars <button {{on 'click' this.doSomething}} /> ```
This will call the function on your component:
```js import Component from '@ember/component';
export default class ExampleComponent extends Component { doSomething = (event) => { //
event
is the native click Event console.log('clicked on the button'); }; }); ```See the [Guide on Component event handlers](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_html-modifiers-and-actions) and the [API docs for
on
](../Ember.Templates.helpers/methods/on?anchor=on) for more details.### Event Handler Methods
Components can also respond to user-initiated events by implementing a method that matches the event name. This approach is appropriate when the same event should be handled by all instances of the same component.
An event object will be passed as the argument to the event handler method.
```app/components/my-widget.js import Component from '@ember/component';
export default Component.extend({ click(event) { //
event.target
is either the component's element or one of its children let tag = event.target.tagName.toLowerCase(); console.log('clicked on a<${tag}>
HTML element!'); } }); ```In this example, whenever the user clicked anywhere inside the component, it will log a message to the console.
It is possible to handle event types other than
click
by implementing the following event handler methods. In addition, custom events can be registered by usingApplication.customEvents
.Touch events:
touchStart
touchMove
touchEnd
touchCancel
Keyboard events:
keyDown
keyUp
keyPress
Mouse events:
mouseDown
mouseUp
contextMenu
click
doubleClick
focusIn
focusOut
Form events:
submit
change
focusIn
focusOut
input
Drag and drop events:
dragStart
drag
dragEnter
dragLeave
dragOver
dragEnd
drop
Component Ember.CoreView Ember.TargetActionSupport Ember.ClassNamesSupport Ember.ActionSupport Ember.ViewMixin Ember.ViewStateSupport
Modifiers
@public
namespace @ember/-internals/glimmer/lib/component-managers/curly
module '@ember/-internals/glimmer/lib/component-managers/curly' {}
variable ARGS
const ARGS: string;
variable BOUNDS
const BOUNDS: Symbol;
variable CURLY_CAPABILITIES
const CURLY_CAPABILITIES: InternalComponentCapabilities;
variable CURLY_COMPONENT_MANAGER
const CURLY_COMPONENT_MANAGER: CurlyComponentManager;
variable DIRTY_TAG
const DIRTY_TAG: Symbol;
variable HAS_BLOCK
const HAS_BLOCK: string;
variable IS_DISPATCHING_ATTRS
const IS_DISPATCHING_ATTRS: Symbol;
function initialRenderInstrumentDetails
initialRenderInstrumentDetails: (component: any) => any;
function isCurlyManager
isCurlyManager: (manager: object) => boolean;
function processComponentInitializationAssertions
processComponentInitializationAssertions: ( component: Component, props: any) => void;
function rerenderInstrumentDetails
rerenderInstrumentDetails: (component: any) => any;
class CurlyComponentManager
class CurlyComponentManager implements WithCreateInstance<ComponentStateBucket>, WithDynamicLayout<ComponentStateBucket, RuntimeResolver>, WithDynamicTagName<ComponentStateBucket> {}
method create
create: ( owner: Owner, ComponentClass: ComponentFactory, args: VMArguments, { isInteractive }: Environment, dynamicScope: DynamicScope, callerSelfRef: Reference, hasBlock: boolean) => ComponentStateBucket;
method didCreate
didCreate: ({ component, isInteractive }: ComponentStateBucket) => void;
method didCreateElement
didCreateElement: ( { component, classRef, isInteractive, rootRef }: ComponentStateBucket, element: Element, operations: ElementOperations) => void;
method didRenderLayout
didRenderLayout: (bucket: ComponentStateBucket, bounds: Bounds) => void;
method didUpdate
didUpdate: ({ component, isInteractive }: ComponentStateBucket) => void;
method didUpdateLayout
didUpdateLayout: (bucket: ComponentStateBucket) => void;
method getCapabilities
getCapabilities: () => InternalComponentCapabilities;
method getDebugName
getDebugName: (definition: ComponentFactory) => string;
method getDestroyable
getDestroyable: (bucket: ComponentStateBucket) => Destroyable;
method getDynamicLayout
getDynamicLayout: (bucket: ComponentStateBucket) => CompilableProgram | null;
method getSelf
getSelf: ({ rootRef }: ComponentStateBucket) => Reference;
method getTagName
getTagName: (state: ComponentStateBucket) => Nullable<string>;
method prepareArgs
prepareArgs: ( ComponentClass: ComponentFactory, args: VMArguments) => PreparedArguments;
method templateFor
protected templateFor: (component: Component) => CompilableProgram | null;
method update
update: (bucket: ComponentStateBucket) => void;
namespace @ember/-internals/glimmer/lib/component-managers/mount
module '@ember/-internals/glimmer/lib/component-managers/mount' {}
class MountDefinition
class MountDefinition implements ComponentDefinition {}