[SalesForce] Lightning Components: expression inside fails

I have the following markup in a Component

<aura:component controller="elfL1" implements="forceCommunity:availableForAllPageTypes,force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="ts"       type="String"  />

    <ltng:require 
        styles ="{!'/resource/' + v.ts + '/elfLightningFixes_css'}" 
    />
    {!'/resource/' + v.ts + '/elfLightningFixes_css'}

And in the controller I'm populating ts 

    init : function(component, event, helper) {
        console.log('elfL1.init()');
        component.set("v.ts",''+Math.round((new Date()).getTime())+'');
    },

Now the simple expression output {!'/resource/' + v.ts + '/elfLightningFixes_css'} works as expected as you see in the screenshot, but for <ltng:require/> it seems handled as array of the single letters of the string

enter image description here

Any idea on how to use the expression in <ltng:require/> ?

UPDATE:

Even using only a string attribute, it fails

<aura:attribute name="requireStyles"    type="String"  />
<ltng:require 
    styles = "{!v.requireStyles}" 
/>

setting the string in the clientside controller

var ts = '' + Math.round((new Date()).getTime());
component.set("v.requireStyles", '/resource/' + ts + '/elfLightningFixes_css' );

Error is very strange

Error during init : styles is undefined

enter image description here

Best Answer

Sorry folks this one fell through the cracks. If you do not get an answer in a timely fashion in the future please make sure to open a support case with Salesforce.

There are a few contributing factors:

  • the data type of scripts and styles are both String[] and Aura's auto coercion from comma separated list (String) to String[] does not kick in when you explicitly set the value of an attribute (it can't really because that could be a mistake of say the String[] represented paragraphs in a story)

  • Setting the value to a String[] in init() happens too late for ltng:require to "see" it and currently there is no logic in ltng:require to observe changes to scripts or styles attributes

ideally be of these will be addressed in a future version of ltng:require (this is where a support case would have also come in handy BTW).

For now the workaround I have used in my projects has been to use $A.createComponent("ltng:require",...) in my init() and then add the instance to the body of my component that needs the require. This turns things into late binding/creation and works great. You can see this in action here https://github.com/forcedotcom/aura-ng/blob/master/metadata/aura/region/regionController.js

Please open that support case to help me get this prioritized and in the product plan!

Related Topic