Pass Property to Contained Component

If I want to pass a property to my app, I can do it thusly:
var app = new App({dbName: 'my DB name'})
and if I want to set a property on a contained component, I can do it thusly:
var App = enyo.kind({
	name: "App",
	components:[
            /* ... */
            {kind: 'DbService', dbName: 'some DB name'}

... but how can I pass the property from app to its contained component?

The owned component can evaluate this.owner.dbName, but that breaks encapsulation. Is there an elegant way to do this?

Comments

  • edited April 2014
    Have you tried using the enyo.Application object? You can access the application object in your controls via this.app. Otherwise for a standard kind, you might try utilizing the constructor and have it take in parameters that you use for your components (I did it this way so you can assign a hash of properties to your component, otherwise you could take in individual parameters and bind them to your component properties and still define the component declaratively [edit: see theryanjduffy's post below]):
    
    var App = enyo.kind({
    	name: "App",
        constructor: function(inParams) {
            this.inherited(arguments);
            this.params = inParams;
        },
        create: function() {
            this.inherited(arguments);
            this.createComponent(enyo.mixin({kind: 'DbService'}, this.params));
        }
    });
    
    app = new App({dbName: 'my DB name'});
    
  • Using a application-global object like this.app would appear to be a step backward from depending on a components owner - then the value can be mutated by components other than the owner.

    I'm already using the create method in the owned component:
    var DbService = enyo.kind({
    	name: "DbService",
    	create: function () {
    		this.dbName = this.owner.dbName || this.dbName;
    
    It would be more maintainable for the app to set the value on the component:
    var App = enyo.kind({
    	name: "App",
    	components:[
                {kind: 'DbService', dbName: /* what goes here? */}
    
    It would be possible to create the DbService dynamically, but that is more complicated than the pseudo-static above.
  • Assuming you're using the nightly builds (or at least > 2.2), I'd suggest using bindings.

    http://jsfiddle.net/ujuCJ/
  • Thank you, but your solution does not make the value available in DbService's create() function.
  • You're correct. Bindings aren't processed until after create. If you really need it in create(), you'll have to manually create it through createComponent like Aaron described or break encapsulation like your example.
Sign In or Register to comment.