Aura component without any DOM element?

Question

On the Aura.js 'Getting Started' page (which is down at the moment, so that's a Google cache link) it says the following:

The other way to start components on application start is to explicitly pass a list to the app.start method. Example:

`app.start([{ name: 'hello', options: { el: '#hello' } }]);`

All listed components MUST have at least the name and options.el defined, where name is the name of the component to start and options.el is a DOM selector to target the DOM Element that will be the root of your component.

So from that it seems like Aura requires that every module/component MUST have an associated DOM element. Is that correct?

In my app I'd like to have some modules which are purely for running long background calculations which shouldn't be associated with any DOM element. They emit their computed results to other modules which deal with displaying.

I love the philosophy behind Aura.js (mediator/modules + MVC) but I don't really want to hack around it too much. Any insights would really be appreciated. Maybe I've misinterpreted something? Maybe there's a better framework for me?

Thanks!

Answer 1

The component requires an associated DOM element, but it doesn't require that the DOM element be visible on the page, just accessible within the DOM. You could create a place to put your invisible components like this:

$("body").append('<div id="invisbleComponents" style="display:none"></div>');

Then you can create a method to start your components and dump them in your invisible div automatically:

var startComponent = function(c) {
    $('<div data-aura-component="' + c + '" id="' + c + 'Options"></div>').appendTo("#invisibleComponents);
    app.start([{ name: c, options: { el: '#' + c + 'Options' } }]);
};

So to start a component called "myComponent" you just make a call:

startComponent('myComponent');