控制器中的Ember设置Component属性

Question

我有一个组件，我想在控制器中设置其属性。 我似乎在使用计算别名来设置它时遇到问题。 请参见下面的代码。

我的组件如下：

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

我试图在父控制器中设置属性totalWidth，如下所示：

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

当我尝试控制台记录它时，它返回一个未定义的值，并显示错误消息
Property set failed: object in path "myModalComponent" could not be found or was destroyed.

任何帮助都感激不尽。

谢谢

Answer 1

请参阅小提琴上的此工作示例， http://jsfiddle.net/gXcfL/28/ 。 在模板中将控制器属性绑定到组件的属性。

<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>