4

I'm working through the developer guide for Lightning and am attempting to try a few things out to better understand the Customizing Component Rendering section on page 138 of the guide: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

What I'm gleaning from this section (and in particular, the example on page 139) is that I should be able to do some DOM manipulation by using a helper method in my render function. But when I log my renderer's arguments, there's nothing there - so no access to helpers. Code below.

Essentially, I'd like to write some HTML to my component via my render function (by way of a helper), at component rendering time. Based on what I've read about the component lifecycle it seems that this would be the most appropriate way to handle this.

Does anyone have experience with custom rendering and manipulating DOM from a custom renderer?

({
    afterRender: function (cmp, helper) {
        var afterRend = this.superAfterRender();

        console.log('after render args', arguments);
        return afterRend;
    },
    render: function (cmp, helper) {
        var rend = this.superRender();

        console.log('render args', arguments);
        return rend;
    }
})

Thanks in advance.

5

The empty arguments is a bit strange - a side effect of the way your renderer method is invoked by Lightning (Aura Framework) - but if you console.log(cmp) and console.log(helper) you will see that they are in scope and available.

You do not have to use a Helper at all unless you have common code you want to be able to call from other renderer (or controller) methods.

Implementing render(), rerender(), etc allows you to take over the DOM generation and update process entirely or (what I do more often) is to let Lightning markup do some of the work and then custom javascript (often 3rd party libs) fill in the blanks.

Even better in many cases is to delegate all of the rendering work to Lightning and leverage its powerful data binding {!v.something} capabilities with auto update (even bidrectional if you need that). So instead of creating a renderer you can have your .cmp use {!v.something} expressions and just have your client side controller update the underlying model/attribute values and Lightning will automatically (and very efficiently) rerender the subregions from your cmp that are impacted.

I often combine all of the above to achieve the best balance.

  • Excellent. Thank you, this helped me get going in the right direction. Sure enough, cmp and helpers are both in scope. It also appears that the cmp argument is essentially $A, which I believe is the Aura object itself, correct? – chrisjordanme Jul 1 '15 at 13:10
  • 1
    cmp should not be equal to $A - not even close - it should be the component that is being rendered – Doug Chasman Jul 1 '15 at 17:20
  • @DougChasman im loading a 3rd party lib via ltng:require and it seems to happen, that the lib is not loaded at the time afterRender() is invoked. I assume due to async loading done by ltng:require. Is there any easy way to make sure libs are loaded at the time of first afterRender() ? – Uwe Heim Dec 17 '16 at 16:24
  • @UweHeim: you might want to take a look at the afterScriptsLoaded event on ltng:require (see developer.salesforce.com/docs/atlas.en-us.lightning.meta/…). When that event is fired you can be sure that the libs are loaded – Jelle van Geuns Jan 23 '17 at 4:03

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.