EmberJS: Inserisci componente in modo dinamico - javascript, ember.js

Hai i seguenti componenti:

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
}
});

Cosa mi chiedo se è possibile aggiungere un componente figlio a un genitore in qualsiasi stato di rendering e in base a un parametro?

Così chiamo, ad esempio:

{{parent child="child"}}

E alla fine rende:

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

risposte:

0 per risposta № 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 --}}

Nota: l'helper del componente sarà disponibile in Ember 1.11. Se si utilizza una versione precedente, è possibile utilizzare l'addon ember-dynamic-component.


Più popolare