Imports

Lazo support HTML imports in the following capacity. It adds and removes import link nodes to the document, and provides references to these nodes and the node import properties if the browser supports HTML imports.

Defining Import Links

Imports can be defined at the application and component level.

Application Level

Imports at the application level are defined in the imports property of app.json. For more information on import link definitions please refer to the links documentation.

Component Level

Imports can be defined at the component level by adding an imports directory to a component’s directory. Lazo will treat every file with an extension of “.html” as an import and add a corresponding link node to the document when the component is used by a route.

Getting a Reference to an Import

There are two APIs for getting references to import nodes. Both APIs return a reference to the node import property if the browser supports HTML imports otherwise it returns a reference to the link node itself.

// get a reference to an application level import
// import location in directory structure is "APP_PATH/app/imports/some-import.html"
var someImport LAZO.app.getImport('app/imports/some-import.html');

// get a reference to a component level import
// import location in directory structure is "APP_PATH/components/component_name/imports/some-import.html"
var someImport = <controller>.getImport('some-import');

Resolving Import Links

By default Lazo resolves import link nodes using the relative file path (see previous section code exmaples) and the node context/owner ("application" or "component_name"). This resolution pattern can be overridden when combo handling imports by extending lazoBundle, specifically the resolveImport method.

define(['lazoBundle', 'l!jquery', 'l!jquery.cookie'], function (LazoBundle) {

    'use strict';

    var supportsImports = (function () {
        return LAZO.isClient && 'import' in document.createElement('link');
    })();

    return LazoBundle.extend({

        resolveImport: function (relativePath, namespace) {
            // only allow call to be made from client; bail out, return null, and log a warning
            if (LAZO.app.isServer) {
                LAZO.logger.warn('bundle.resolveImport', 'Cannot call on server.');
                return null;
            }

            // checks if the lazo development cookie is set
            if ($.cookie('development') !== '1') {
                // assumes that all application imports have been bundled into single import
                // and that all component imports have been bundled into single import
                var $import = namespace === 'application' ? $('[href*="app/imports/bundles/app.html"]') :
                    $('[href*="app/imports/bundles/components.html"]');
                var linkNode = $import[0];

                return linkNode ? (supportsImports ? linkNode.import : linkNode) : null;
            } else {
                return LazoBundle.prototype.resolveImport.call(this, relativePath, namespace);
            }
        }

    });

});