Binding to Dynamically Created Components

Hello,

I'm trying to bind data from a parent control to a dynamically created component within a child control, and I can't seem to make it work.

I can bind to a dynamically created child component, but not to a component created within a child component.

I think I must be missing something simple. Can you point me in the right direction and/or maybe toward some documentation on the subject?

Fiddle: http://jsfiddle.net/g0m0xvLc/3/
enyo.kind({
	name: "App",
	kind: "enyo.Application",
	view: "TestView"
});

enyo.kind({
    name: 'TestView',
    
    published: {
        valueToBind: 1
    },
    
    components: [
        {kind: 'onyx.Button', content: 'Create Component', ontap: 'goCreate'},
        {kind: 'onyx.Button', content: 'Change Bound Value', ontap: 'goChange'},
        {name: 'declarativelyBound'},
        {name: 'container'}
    ],
    
    bindings: [
        {from: '.valueToBind', to: '.$.declarativelyBound.content'},
        {from: '.valueToBind', to: '.$.dynamicallyBound.content'},
        {from: '.valueToBind', to: '.$.container.$.innerDynamicallyBound.content'}
    ],
    
    goCreate: function (inSender, inEvent) {
        this.createComponent({
            name: 'dynamicallyBound', content: 'dynamicallyBound'
        });
        this.render();
        
        this.$.container.createComponent({
            name: 'innerDynamicallyBound', content: 'innerDynamicallyBound'
        });
        this.$.container.render();
    },
    
    goChange: function (inSender, inEvent) {
        this.set('.valueToBind', 2);
    }
});

new App().renderInto(document.body);
The 'dynamicallyBound' component works fine, but the 'innerDynamicallyBound' won't take the bound values.

Thanks for your help!

Comments

  • There's two things going on. First, in the binding, you only need one $. The $ hash contains all the components within that component. Second, add an object as a second parameter that sets the owner to the outer control that contains the bindings.

    So, change
            {from: '.valueToBind', to: '.$.container.$.innerDynamicallyBound.content'}
    to
            {from: '.valueToBind', to: '.$.innerDynamicallyBound.content'}
    and change
            this.$.container.createComponent({
                name: 'innerDynamicallyBound', content: 'innerDynamicallyBound'
            });
    
    to
            this.$.container.createComponent({
                name: 'innerDynamicallyBound', content: 'innerDynamicallyBound'
            }, {owner: this});
    
  • That works perfectly. Thank you!
  • Another option, should you wish to have more control over the binding or if you need the container to be the owner of innerDynamicallyBound, you can also dynamically generate the bindings after the dynamic component has been created:
    this.$.container.createComponent({
        name: 'innerDynamicallyBound', content: 'innerDynamicallyBound'
    });
    var binding = new enyo.Binding({
        from: ".valueToBind",
        to: ".$.container.$.innerDynamicallyBound.content",
        owner: this
    });
Sign In or Register to comment.