Ember 在控制器中设置组件属性答案

【问题标题】：Ember set Component property in controllerEmber 在控制器中设置组件属性
【发布时间】：2015-03-02 16:22:47
【问题描述】：

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

我的组件如下：

 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.

任何帮助将不胜感激。

谢谢

【问题讨论】：

你能把这个扔到 jsbin 上吗？
父母与他们孩子的组件没有简单的直接联系。想想如果您将该组件两次放入模板中，myModalComponent 将引用哪一个。你会做这样的事情{{ myModalComponent modalWidth=totalWidth}}

标签： ember.js

【解决方案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>

【讨论】：