{{mount}} lazy loading route-less engines
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon perf(lazy-mount): only call `registerWaiter` in testing mode Jan 10, 2019
app feat: initial implementation Nov 28, 2017
config
lib/an-engine style(eslint): fix fixable errors Dec 13, 2018
tests
vendor Initial Commit from Ember CLI v2.16.2 Nov 28, 2017
.editorconfig Initial Commit from Ember CLI v2.16.2 Nov 28, 2017
.ember-cli
.eslintignore chore(deps): run ember-cli-update Dec 13, 2018
.eslintrc.js
.gitignore
.npmignore chore(deps): run ember-cli-update Jan 10, 2019
.prettierrc chore: update deps and improve linters Oct 24, 2018
.template-lintrc.js chore(deps): upgrade ember-cli Oct 24, 2018
.travis.yml
.watchmanconfig Initial Commit from Ember CLI v2.16.2 Nov 28, 2017
CONTRIBUTING.md chore(deps): run ember-cli-update Dec 13, 2018
LICENSE.md
README.md
ember-cli-build.js
index.js test: add tests Dec 13, 2018
package.json
testem.js
yarn.lock chore(deps-dev): bump prettier from 1.15.3 to 1.16.0 Jan 20, 2019

README.md

ember-lazy-mount

Build Status npm version Download Total Ember Observer Score Ember Versions code style: prettier dependencies devDependencies

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

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