[SalesForce] Lightning Component Custom Rendering

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.

Best Answer

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.

Related Topic