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

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 a Registry, 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 a Container 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 the fullName.

                                                              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 a Registry, 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 {}

                                                                                                                                property namespace

                                                                                                                                namespace: string | undefined;

                                                                                                                                  property source

                                                                                                                                  source: string | undefined;

                                                                                                                                    property specifier

                                                                                                                                    specifier: string;

                                                                                                                                      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 a Container 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 the fullName.

                                                                                                                                                            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 {}

                                                                                                                                                                    property property

                                                                                                                                                                    property: string;

                                                                                                                                                                      property specifier

                                                                                                                                                                      specifier: FullName;

                                                                                                                                                                        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 (or ENV for backwards compatibility with earlier versions of Ember). The EmberENV 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 {}

                                                                                                                                                                                                          property exports

                                                                                                                                                                                                          exports: object;

                                                                                                                                                                                                            property imports

                                                                                                                                                                                                            imports: object;

                                                                                                                                                                                                              property lookup

                                                                                                                                                                                                              lookup: Record<string, unknown>;

                                                                                                                                                                                                                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 {}

                                                                                                                                                                                                                          property exports

                                                                                                                                                                                                                          exports: object;

                                                                                                                                                                                                                            property imports

                                                                                                                                                                                                                            imports: object;

                                                                                                                                                                                                                              property lookup

                                                                                                                                                                                                                              lookup: Record<string, unknown>;

                                                                                                                                                                                                                                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 (or ENV for backwards compatibility with earlier versions of Ember). The EmberENV 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. The helper 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 the htmlSafe 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 with htmlSafe, 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 in Ember.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 and age:

                                                                                                                                                                                                                                                                                                ```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's value 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. readDOMAttr

                                                                                                                                                                                                                                                                                                        Parameter 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 calling htmlSafe(). 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 a button 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 the tagName 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 Attribute

                                                                                                                                                                                                                                                                                                                                                                                        The HTML class attribute of a component's tag can be set by providing a classNames 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 a classNameBindings 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's class 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 and classNameBindings is in addition to the class 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 or undefined.

                                                                                                                                                                                                                                                                                                                                                                                        ```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 is false 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 becomes false or undefined the class name will be removed.

                                                                                                                                                                                                                                                                                                                                                                                        Both classNames and classNameBindings 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 to http://bing.com, despite it having attribute binidng to the url property, which was set to http://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 or undefined as the value of the property used in attributeBindings:

                                                                                                                                                                                                                                                                                                                                                                                        ```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 events

                                                                                                                                                                                                                                                                                                                                                                                        In 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 using Application.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 singlechild.

                                                                                                                                                                                                                                                                                                                                                                                            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 like export 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 in Ember.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 and age:

                                                                                                                                                                                                                                                                                                                                                                                                                    ```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's value 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. readDOMAttr

                                                                                                                                                                                                                                                                                                                                                                                                                            Parameter 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 a button 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 the tagName 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 Attribute

                                                                                                                                                                                                                                                                                                                                                                                                                              The HTML class attribute of a component's tag can be set by providing a classNames 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 a classNameBindings 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's class 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 and classNameBindings is in addition to the class 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 or undefined.

                                                                                                                                                                                                                                                                                                                                                                                                                              ```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 is false 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 becomes false or undefined the class name will be removed.

                                                                                                                                                                                                                                                                                                                                                                                                                              Both classNames and classNameBindings 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 to http://bing.com, despite it having attribute binidng to the url property, which was set to http://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 or undefined as the value of the property used in attributeBindings:

                                                                                                                                                                                                                                                                                                                                                                                                                              ```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 events

                                                                                                                                                                                                                                                                                                                                                                                                                              In 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 using Application.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 {}