ember-lazy-mount

{{mount}} lazy loading route-less engines.

Installation

ember install ember-lazy-mount

Usage

{{lazy-mount}} Component

• name: string — The name of the engine to load
• model?: any — Optional model that will be passed through to the engine

The {{lazy-mount}} component works just like the {{mount}} helper. It accepts the name of the engine as a positional parameter and also an optional model parameter.

As soon as the helper is rendered, it will begin loading the specified engine. If the engine is already loaded, it will be mounted immediately.

The engineName and model parameters are dynamic and you can update them. Setting a new engineName will cause the new engine to be loaded and mounted.

Inline Usage

While the engine is loading, nothing is rendered. If there was an error loading the engine, nothing is rendered.

{{lazy-mount engineName model=optionalDataForTheEngine}}

You can also pass three optional hooks:

{{lazy-mount
  this.engineName
  onLoad=this.onLoad
  didLoad=this.didLoad
  onError=this.onError
}}

• onLoad() — Called when the engine starts loading
• didLoad() — Called when the engine loaded successfully
• onError(error: Error) — Called when the engine failed to load

Block Usage

While the engine is loading or if there was an error loading the engine, the block that is passed to the component is rendered. The engine block parameter is an object with two properties:

• isLoading: boolean — Whether or not the engine is currently loading
• error: Error | null — If there was an error loading the engine

When the engine was loaded successfully, the passed in block is replaced by the engine.

{{#lazy-mount engineName model=optionalDataForTheEngine as |engine|}}
  {{#if engine.isLoading}}
    🕑 The engine is loading...
  {{else if engine.error}}
    😨 There was an error loading the engine:
    <code>{{engine.error}}</code>
  {{/if}}
{{/lazy-mount}}

You can also pass in the same hooks: onLoad, didLoad, onError