4

I'm trying to bind the aura:attribute 'newAccount' name field to dynamically created component aura:inputText field, code below:

MyComponent.cmp

<aura:component>
     <aura:attribute name="newAccount" type="Account"
            default="{'sobjectType':'Account', 'Name':'My New Account'}"/>
     <aura:handler name="init" value="{!this}" action="{!c.renderLayout}"/>

     <div class="container">
        {!v.body}
    </div>
</aura:component>

MyComponentController.js

({
       renderLayout: function(component, event, helper){
            var thenewAccount = component.get('v.newAccount');

            $A.createComponent(
                "ui:inputText",
                {
                    "aura:Id":"accountName",
                    "class": "form-control",
                    "value": "{!v.newAccount.Name}",
                    "label": "Account Name"                
                },
                function(newItem){
                    //Add the new input to the body array
                    if (component.isValid()) {
                        var body = component.get("v.body");
                        body.push(newItem);
                        component.set("v.body", body);
                    }
                }
            );
      }
})

But unfortunately, the binding is not working as expected when I create input field dynamically. Is there something wrong with my code, Is there any code change I can do to make it work?

Edited:

Updated component 'renderLayout' invocation as @crmprogdev suggested. I missed it initially but still the input field is being generated but the binding is not working.

Improve this question

1 Answer 1

Reset to default
1

I don't see anything in your component that calls your handler to create the dynamic component. I'd expect to see a line inside your component that looks something like this:

<aura:handler name="init" value="{!this}" action="{!c.renderLayout}"/>
Improve this answer
4
  • @crmpgordev updated my code above, but still not working.
    – loosy
    Sep 12, 2015 at 14:16
  • The issue may be that you have {!v.body} nested inside a <div>. Try it without the <div> to see if it renders. If it does, you can add the <div> or the class itself to your mark-up in the creation code.
    – crmprogdev
    Sep 12, 2015 at 14:29
  • I tried it but didn't work. I guess I've to go back old way using visualforce pages and apex dynamicity. And I guess I've to wait until lightning gets mature :(
    – loosy
    Sep 20, 2015 at 19:53
  • Have you tried using debugger; and console.log(); statements to put it into debug mode and walk it through each statement to see where any errors might be occurring? I suspect there may be an issue with your default attribute definition. Trying to pass sObjectType along with Name might be the source of the problem. I think only Name should have a default since you've already defined type as Account..
    – crmprogdev
    Sep 21, 2015 at 20:20

You must log in to answer this question.

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