Ember: le azioni del componente create dinamicamente non si attivano

Question

Ho problemi con {{actions}} sui componenti Ember (1.11.0) non attivati ​​quando il componente è stato aggiunto alla pagina in modo dinamico. Stranamente, sembra essere correlato al modo in cui l'applicazione ember è stata aggiunta alla pagina - tramite il modello predefinito e aggiunto a un "rootElement".

lavoro JSBin: actions are triggered

non lavoro-JSBin: actions aren't triggered

mio Componente Definizione:

<script type="text/x-handlebars" data-template-name="components/foo-bar"> 
    <p>Component {{name}}</p> 
    <button {{action "doIt"}}>Do It</button> 
</script> 

App.FooBarComponent = Ember.Component.extend({ 
    click: function() { 
     console.log('click fired! - ' + this.get('name')); 
    }, 
    actions: { 
     doIt: function() { 
      console.log('doIt fired! - ' + this.get('name')); 
     } 
    } 
}); 

L'evento click() e l'azione doIt() non si attivano quando il componente è stato aggiunto alla pagina in modo dinamico. Sto usando append() per aggiungere il componente alla pagina:

App.IndexController = Ember.Controller.extend({ 
    count : 1, 
    actions: { 
     createNewFoobBar: function() { 
      this.set('count', this.get('count') + 1); 
      var comp = this.container.lookup('component:foo-bar'); 
      comp.set('name', this.get('count')); 
      comp.set('controller', this); 
      comp.append(); 
     } 
    } 
}); 

In entrambi i casi, le azioni siano correttamente attivati ​​quando il componente è parte del modello:

{{foo-bar name="one"}} 

Answer 1

ho scoperto che funziona se:

• comp.appendTo('#content') è usato invece comp.append(),
• comp.set('controller', this); viene rimosso, altrimenti viene generato un errore.

jsbin di lavoro: http://emberjs.jsbin.com/saquzupaye/edit?html,js,console,output

Perché comp.append() non funziona? Potremmo vedere che i componenti vengono aggiunti a body anziché a #content e questo comportamento sembra inaspettato, dal momento che è stato definito rootElement: "#content".

da Guide:

" ... Il rootElement può essere un elemento DOM o una stringa selettore compatibile jQuery noti che viste aggiunte al DOM all'esterno dell'elemento principale non riceveranno eventi If.. Si specificare un elemento radice personalizzato, assicurarsi di aggiungere solo le viste al suo interno! " (dalla guida Event delegation)

"... Alla fine del processo di rendering, la vista radice richiede il RenderBuffer per il suo elemento.Il RenderBuffer prende la sua stringa completata e usa jQuery per convertirlo in un elemento. quell'elemento alla sua proprietà di elemento e lo colloca nella posizione corretta nel DOM (la posizione specificata nell'appendice o l'elemento radice dell'applicazione se l'applicazione utilizzata aggiunge). " (dalla guida UnderstandingEmber: The view Layer).

Quindi la mia opinione è che è il bug e la soluzione alternativa è di aggiungere manualmente all'elemento radice utilizzando appendTo().