4 handy tips for your lightning development
We all come across a situation where we are forced to use html DOM elements in lightning component, which goes very well with aura framework.
But in case if you are thinking to access DOM elements via id from your js controller or helper (for example document.getElementById(‘<Your DOM element Id>’)) be aware that DOM element will not be available at the init event of a lightning component. As a workaround you can go with aura:doneRendering event or replace html DOM elements with aura framework tags.
.A well-known limitation with html input tags using in lightning component is binding user inputted values to aura attribute. The value attribute in html tags will display the value assigned to attribute but not reads the user input value. To overcome this limitation avoid using html inputs and replace them with ui:input tags which reads the value to attribute on onblur event of the input element or lightning:input tags which reads the value to attribute on keyup event of the input element.
As we know lightning framework is based on event driven architecture. The events might be component event, application event or DOM events. When working with html DOMs event.target.value will be handy to get the value attribute of the DOM element which will be source for event. This has a browser specific issue using with input type of radio. In internet explorer event.target.value returns ‘on’ irrespective of the value assigned to the radio in IE whereas it works with other browsers. A workaround for this is to use data attributes for the DOM elements and access the value in data attributes via event.target.getAttribute(‘<data attribute name>’).
Component events and Application events are building blocks of any lightning application as it facilitates the communication between the lightning components. According to the documentation it says application event should be registered in the notifier component, but did you know they work without registering in lightning component. The reason behind this is application event is handled across the application irrespective of the component hierarchy and it is independent from the name of the register event.