Ember: Các hành động thành phần được tạo động không kích hoạt

Question

Tôi đang gặp sự cố với {{actions}} trên thành phần Ember (1.11.0) không được kích hoạt khi thành phần được thêm vào trang động. Thật kỳ lạ, có vẻ như nó liên quan đến cách ứng dụng ember đã được thêm vào trang - thông qua mẫu mặc định và được thêm vào một "rootElement".

Working JSBin: actions are triggered

Non-Working JSBin: actions aren't triggered

Component Định nghĩa của tôi:

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

Các nhấp chuột() sự kiện và DoIT() hành động không được kích hoạt khi các thành phần đã được thêm vào trang động. Tôi đang sử dụng append() phương pháp để thêm các thành phần để trang:

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

Trong cả hai trường hợp, hành động được kích hoạt đúng cách khi thành phần này là một phần của mẫu:

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

Answer 1

tôi thấy rằng nó hoạt động nếu:

• comp.appendTo('#content') được sử dụng thay comp.append(),
• comp.set('controller', this); được lấy ra, nếu không thì sẽ bị lỗi.

jsbin làm việc: http://emberjs.jsbin.com/saquzupaye/edit?html,js,console,output

Tại sao comp.append() không làm việc? Chúng tôi có thể thấy rằng các thành phần được thêm vào body thay vì #content và hành vi này trông giống như bất ngờ, vì rootElement: "#content" được xác định.

Từ Hướng dẫn:

" ... Các rootElement có thể là một phần tử DOM hoặc một chuỗi selector jQuery tương thích Lưu ý rằng quan điểm nối vào DOM bên ngoài phần tử gốc sẽ không nhận được sự kiện Nếu.. bạn chỉ định phần tử gốc tùy chỉnh, đảm bảo bạn chỉ thêm các chế độ xem bên trong nó! " (từ Event delegation hướng dẫn)

"... Ở cuối quá trình kết xuất, khung nhìn gốc sẽ hỏi RenderBuffer cho phần tử của nó. RenderBuffer lấy chuỗi đã hoàn thành và sử dụng jQuery để chuyển đổi nó thành một phần tử. yếu tố đó đến thuộc tính phần tử của nó và đặt nó vào đúng vị trí trong DOM (vị trí được chỉ định trong phụ lục hoặc phần tử gốc của ứng dụng nếu ứng dụng được sử dụng gắn thêm). " (từ hướng dẫn UnderstandingEmber: The view Layer).

Vì vậy, ý kiến ​​của tôi là đó là lỗi và cách khắc phục là thêm phần tử gốc theo cách thủ công bằng cách sử dụng appendTo().