Function modifier

  • A resource-based API for building modifiers.

    You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

    Using resources for modifiers provides a clear and concise API with easy to read concerns.

    The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

    This signature for ember-resource's modifier follows the plain function invocation signature.

    import { resource } from 'ember-resources';
    import { modifier } from 'ember-resources/modifier';

    const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
    let animation = element.animate([
    { transform: `translateX(${arg1}px)` },
    { transform: `translateX(-${arg2}px)` },
    ], {
    duration: 100,
    iterations: Infinity,
    });

    on.cleanup(() => animation.cancel());
    });
    });

    <template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
    </template>

    Type Parameters

    • El extends Element

    • Args extends unknown[] = unknown[]

    Parameters

    • fn: ((element: El, ...args: Args) => void)
        • (element: El, ...args: Args): void
        • Parameters

          • element: El
          • Rest ...args: Args

          Returns void

    Returns ModifierLike<{
        Args: {
            Named: EmptyObject;
            Positional: Args;
        };
        Element: El;
    }>

  • A resource-based API for building modifiers.

    You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

    Using resources for modifiers provides a clear and concise API with easy to read concerns.

    The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

    This signature for ember-resource's modifier follows the plain function invocation signature.

    import { resource } from 'ember-resources';
    import { modifier } from 'ember-resources/modifier';

    const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
    let animation = element.animate([
    { transform: `translateX(${arg1}px)` },
    { transform: `translateX(-${arg2}px)` },
    ], {
    duration: 100,
    iterations: Infinity,
    });

    on.cleanup(() => animation.cancel());
    });
    });

    <template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
    </template>

    Type Parameters

    • S extends {
          Element?: Element;
      }

    Parameters

    • fn: ((element: ElementFor<S>, ...args: ArgsForFn<S>) => unknown)
        • (element: ElementFor<S>, ...args: ArgsForFn<S>): unknown
        • Parameters

          • element: ElementFor<S>
          • Rest ...args: ArgsForFn<S>

          Returns unknown

    Returns ModifierLike<S>

  • A resource-based API for building modifiers.

    You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

    Using resources for modifiers provides a clear and concise API with easy to read concerns.

    The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

    This signature for ember-resource's modifier follows the plain function invocation signature.

    import { resource } from 'ember-resources';
    import { modifier } from 'ember-resources/modifier';

    const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
    let animation = element.animate([
    { transform: `translateX(${arg1}px)` },
    { transform: `translateX(-${arg2}px)` },
    ], {
    duration: 100,
    iterations: Infinity,
    });

    on.cleanup(() => animation.cancel());
    });
    });

    <template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
    </template>

    Type Parameters

    • S extends {
          Args?: object;
      }

    Parameters

    • fn: ((element: ElementFor<S>, ...args: ArgsForFn<S>) => unknown)
        • (element: ElementFor<S>, ...args: ArgsForFn<S>): unknown
        • Parameters

          • element: ElementFor<S>
          • Rest ...args: ArgsForFn<S>

          Returns unknown

    Returns ModifierLike<S>

  • A resource-based API for building modifiers.

    You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

    Using resources for modifiers provides a clear and concise API with easy to read concerns.

    The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

    This signature for ember-resource's modifier follows the plain function invocation signature.

    import { resource } from 'ember-resources';
    import { modifier } from 'ember-resources/modifier';

    const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
    let animation = element.animate([
    { transform: `translateX(${arg1}px)` },
    { transform: `translateX(-${arg2}px)` },
    ], {
    duration: 100,
    iterations: Infinity,
    });

    on.cleanup(() => animation.cancel());
    });
    });

    <template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
    </template>

    Type Parameters

    • S extends {
          Args?: object;
          Element?: Element;
      }

    Parameters

    • fn: ((element: ElementFor<S>, ...args: ArgsForFn<S>) => unknown)
        • (element: ElementFor<S>, ...args: ArgsForFn<S>): unknown
        • Parameters

          • element: ElementFor<S>
          • Rest ...args: ArgsForFn<S>

          Returns unknown

    Returns ModifierLike<S>

Generated using TypeDoc