CODEWITHSUNDEEP
ember.js
pseudoanime
pseudoanime

Reputation: 1593

Ember set Component property in controller

I have a Component, whose property I want to set in a Controller. I seem to be having problems using the computed alias to set it. Please see code below.

My Component is as follows: 

 TM.MyModalComponent = Ember.Component.extend({
    totalWidth: '200px',  
    widthStyle: function() { 
        console.log(this.get('totalWidth'));
        return 'width:'+this.get('totalWidth');    
    }.property('totalWidth'),  
 });

I am trying to set the property totalWidth in a parent controller as follows:

modalWidth:Ember.computed.alias("myModalComponent.totalWidth"),
this.set("modalWidth",'100px');

It returns a undefined value when I try to console log it and errors with
Property set failed: object in path "myModalComponent" could not be found or was destroyed.

Any help will be much appreciated.

Thanks

Upvotes: 0

Views: 1387

Answers (1)

Sheba
Sheba

Reputation: 736

Refer this working example on fiddle, http://jsfiddle.net/gXcfL/28/. Bind controller property to component's property in template.

<script type="text/x-handlebars">
<div class="container">
    <div>Click to set controller's width value</div>
    <button class="btn" {{action 'changeWidth'}}>Click</button>
    {{view TM.MyModalComponent 
     totalWidth = modalWidth
    }}
</div>
</script> 

<script type="text/x-handlebars" data-template-name="component">
    {{widthStyle}}
</script>

Upvotes: 1

Related Questions