The Module's Element
Each module has a 'root' element (
myModule.el). This is the single element that wraps the contents of a module. It is your handle on the module once it has been injected into the DOM. You may be familiar with the
.el concept from Backbone. In FruitMachine it is similar, but due to the 'DOM free' nested rendering techniques used, the
myModule.el is not always accessible.
In FruitMachine the
.el property of a module is populated when
view.render() is called.
NOTE: As a safety measure we do not setup modules when a module's element could not be found. This means that
myModule.el related setup logic wont error when
1.1. After render
module.el will be defined
var apple = new Apple(); var orange = new Orange(); apple .add(orange) .render(); apple.el //=> "[object HTMLDivElement]" orange.el //=> "[object HTMLDivElement]"
1.2. Without calling
.render() no module elements are set.
var apple = new Apple(); var orange = new Orange(); apple.add(orange); apple.el //=> undefined orange.el //=> undefined
Why is my module.el property undefined after .render()?
The child module markup has failed to template into the parent module correctly. Check your child ids and parent markup to check they match up. See template markup.
How are module root elements found?
Internally each module has a private unique id (
myModule._fmid). When the root element is templated, the html
id attribute value is set to the
.render() is called on a module the HTML is templated and turned into a 'real' element in memory. We store this element and then search for descendant elements by id using
querySelector. Server-side rendered modules being inflated on the client pick up their root element from the DOM when
.setup() is called using
document.getElementById(module._fmid) (super fast).