Question

获得以下组件：

App.ParentComponent = Ember.Component.extend({
   child: '',
   yieldTemplateName: 'empty_by_default',
   setup: function(){
     //append here child compoment
   }.on('didInsertElement')
});

App.ChildComponent = Ember.Component.extend({
   templateName: 'some_location',
   actions:{
     //whatever
   }
});

我想知道是否可以在任何呈现状态和基于参数的情况下将子组件添加到父组件中？

所以我打电话，例如：

{{parent child="child"}}

它最终呈现：

<div !-- parent -- >
  <div !-- child -- > </div>
</div>

Answer 1

App.ParentComponent = Ember.Component.extend({
    child: null,
    hasChild: Em.computed.notEmpty('child')
});

// parent template
{{#if hasChild}}
    {{component child}}
{{/if}}

// another template
{{parent child="child"}} {{!-- displays ChildComponent --}}

注意：组件助手将在Ember 1.11中可用。如果您使用的是早期版本，则可以使用ember-dynamic-component插件。

EmberJS：动态插入组件

1 个答案: