8

For example, is it possible to bind the label of a button to a "myButtonLabel" attribute by adding an expression string like in the following example?

  $A.createComponent(
        "ui:button",
        {
            "aura:id": "findableAuraId",
        //EXAMPLE:    
        "label": "{!v.myButtonLabel}",
        "press": cmp.getReference("c.handlePress")
        },
        function(newButton){
            //Add the new button to the body array
            if (cmp.isValid()) {
                var body = cmp.get("v.body");
                body.push(newButton);
                cmp.set("v.body", body);
            }
        }
    );

2 Answers 2

11

In Lightning, expressions come in two types:

  1. Propery Reference Values like {!v.myButtonLabel} which simply points to an attribute. For those, you can get the reference using cmp.getReference("v.myButtonLabel") and the values will be properly linked, i.e. the component will update when the value changes.

  2. Function Call Values like {!v.myAttr + 1} which contain an equation. All markup in a component is preprocessed on the server and Function Call Values are sent in a compiled version to the client. You can't create a new expression from JavaScript.

7

you can make the dynamically created component's attribute point to aura:attribute but not to an aura:expression.

The key here is to use cmp.getReference().

Like the one you used in your code cmp.getReference("c.handlePress") to dynamically attach component's controller method to ui:inputButton's press event.

You have to use "label": "component.getReference("v.myButtonLabel)" which enables an two-way binding i.e if attribute myButtonLabel value changes ui:inputButton's label also changes and vice verse.

Incase, if you don't want any kind of two-way binding in the component's label, you use cmp.get("v.myButtonLabel") instead of cmp.getReference("v.myButtonLabel").

Here's an example:

Component:

<aura:application access="global">
    <aura:attribute name="test" type="String" default="testBtn"/>
    <!-- change the value and ui:inputButton's label changes --> 
    <ui:inputText value="{!v.test}" label="Set label"/> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    {!v.body} 
</aura:application>

Controller.js:

({
    doInit : function(cmp,event,helper) {
        $A.createComponent(
            "ui:button",
            {
                "aura:id": "findableAuraId",
                "label": cmp.getReference("v.test"), // or cmp.get("v.test")
                "press": cmp.getReference("c.handlePress")
            },
            function(newButton){
                if (cmp.isValid()) {
                    var body = cmp.get("v.body");
                    body.push(newButton);
                    cmp.set("v.body", body);
                }
            }
        );

    },
})
2
  • To clarify, I'm wondering if it's possible to set that attribute to any expression, e.g. "{!v.myAttr + 1}" or "{!'Name: ' + v.name}" Commented Aug 6, 2016 at 21:15
  • 3
    @user3000391 As far as I know, you cannot set attribute to an aura:expression
    – Praveen
    Commented Aug 7, 2016 at 2:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .