can-view-import

module

`<can-import from="MODULE_NAME" />`

Statically import a module from with a can-stache template. MODULE_NAME will be imported before the template renders.

<can-import from="components/tabs" />
<tabs-widget />

Parameters

MODULE_NAME {moduleName}:
A module that this template depends on.

`<can-import from="MODULE_NAME">content</can-import>`

Dynamically import a module. MODULE_NAME will be imported dynamically; the scope within the template is a Promise.

<can-import from="components/tabs">
    {{#if isResolved}}
        <tabs-widget />
    {{/if}}
</can-import>

Parameters

MODULE_NAME {moduleName}:
A module that this template depends on.

Use

A template might depend on component or helper modules. <can-import> allows you to specify these dependencies.

Example:

<can-import from="components/my_tabs"/>
<can-import from="helpers/prettyDate"/>

<my-tabs>
  <my-panel title="{{prettyDate start}}">...</my-panel>
  <my-panel title="{{prettyDate end}}">...</my-panel>
</my-tabs>

Currently this only works with can-view-autorender or the steal-stache plugin.

Progressive Loading

A template may load or conditionally load a module after the initial page load. <can-import> allows progressive loading by using an end tag.

The first example below shows a component being loaded ad hoc. The second illustrates conditionally loading modules based on some application state.

Example:

<can-import from="components/home"></can-import>

{{#eq location 'home'}}
<can-import from="components/home">
 ...
</can-import>
{{/eq}}

{{#eq location 'away'}}
<can-import from="components/away">
  ...
</can-import>
{{/eq}}