Ember: Dinamik olarak oluşturulmuş bileşen eylemleri tetiklenmiyor

Question

Bileşen sayfaya dinamik olarak eklendiğinde tetiklenmeyen ({}}} Ember (1.11.0) bileşenlerinde {{actions}} ile sorun yaşıyorum. İşin tuhafı, ember uygulamasının sayfaya nasıl eklendiğiyle ilgili gibi görünüyor - varsayılan şablon aracılığıyla "rootElement" e ekleniyor.

Çalışma JSBin: actions are triggered

Olmayan Çalışma JSBin: actions aren't triggered

Benim Bileşen Tanımı:

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

tıklayın() olay ve doIt() eylem tetiklenir değil bileşeni sayfaya dinamik olarak eklenmiştir. Ben sayfaya bileşen eklemek için) (yöntemini ekleme kullanıyorum: bunu buldum

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

Answer 1

: Her iki durumda da

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

, eylemler düzgün bileşen şablonun parçası olduğunda tetiklenen

• comp.appendTo('#content') yerine comp.append() kullanılır,
• comp.set('controller', this);
kaldırılır: eğer çalışır aksi halde hata atılır.

Çalışma jsbin:

Neden comp.append()http://emberjs.jsbin.com/saquzupaye/edit?html,js,console,output çalışmıyor ki? Bileşenlerin #content yerine body eklendiğini görebiliyorduk ve bu davranış rootElement: "#content" tanımlandığından beklenmedik gibi görünüyor. Rehberleri itibaren

.

" ... rootElement bir DOM elementi veya jQuery uyumlu seçici dize ya olmak görünümleri olaylarını almaz kök elemanına dışında DOM eklenir unutmayın Eğer. , özel bir kök öğesi belirtin, yalnızca içerdeki görünümleri eklediğinizden emin olun! " (from Event delegation guide)

"... Oluşturma işleminin sonunda, kök görünüm öğesi için RenderBuffer'dan soruyor RenderBuffer tamamlanmış dizesini alır ve jQuery öğesini bir öğeye dönüştürmek için kullanır. bu öğe öğesi özelliğine ve DOM'de doğru yere yerleştirilir (appendTo 'da belirtilen konum veya uygulama, değerini kullanırsa uygulamanın kök öğesi). (UnderstandingEmber: The view Layer kılavuzundan).

Bu yüzden benim düşüncem hata ve geçici çözüm, el ile appendTo() kullanarak kök öğeye eklemektir.