3

While reading this article I met the following rule:

Do not modify DOM in Controller. If you modify DOM in Controller it will call renderer method which will end in no result.

The article looks reliable, but for me the rule above sounds like a nonsense.

I am working with lightning components using the d3.js. I modify the DOM from lightning controller a lot since d3.js is all about svg. And everything works just fine, I am not getting unexpected results.

So, am I just lucky or is the rule above really a nonsense?

2
  • It is a bit hard to understand what and how do you modify in your code using d3. It may be a case that you don't change DOM which is generated by AURA, so it works as expected so far.
    – kurunve
    Aug 3 '18 at 10:25
  • @kurunve, yes, I do not modify the AURA DOM. I am creating an svg container inside the AURA container and update its DOM. For example, I may add or delete DOM nodes by using containter.append("svg"); or container.remove();.
    – iloveseven
    Aug 3 '18 at 10:41
2

Modifying DOM Elements Managed by the Lightning Component Framework

The framework creates and manages the DOM elements owned by a component. If you want to modify these DOM elements created by the framework, modify the DOM elements in the handler for the component’s render event or in a custom renderer. Otherwise, the framework will override your changes when the component is rerendered. For example, if you modify DOM elements directly from a client-side controller, the changes may be overwritten when the component is rendered. You can read from the DOM outside a render event handler or a custom renderer. The simplest approach is to leave DOM updates to the framework. Update a component’s attribute and use an expression in the markup. The framework’s rendering service takes care of the DOM updates. You can modify CSS classes for a component outside a renderer by using the $A.util.addClass(), $A.util.removeClass(), and $A.util.toggleClass() methods.

There are some use cases where you want to perform post-processing on the DOM or react to rendering or rerendering of a component. For these use cases, there are a few options.

Modifying DOM Elements Managed by External Libraries

You can use different libraries, such as a charting library, to create and manage DOM elements. You don’t have to modify these DOM elements within the render event handler or a renderer because they are managed by the external library. A render event handler or a renderer are used only to customize DOM elements created and managed by the Lightning Component framework.

To use external libraries, use ltng:require. The afterScriptsLoaded attribute enables you to interact with the DOM after your libraries have loaded and the DOM is ready. tag orchestrates the loading of your library of choice with the rendering cycle of the Lightning Component framework to ensure that everything works in concert

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.