Ember.js - Ràng buộc thao tác nút từ vòng lặp #each đến mô hình riêng của mình

Question

Tôi dường như không nhận được nút, được tạo trong vòng lặp mẫu #each, để ràng buộc hành động nhấp của nó với mô hình được liên kết. Dưới đây là một bản demo nhanh chóng của các vấn đề ...

Thiết lập Ember.js ứng dụng:

window.Contacts = Ember.Application.create(); 

Contacts.Person = Ember.Object.extend({ 
    first: '', 
    last: '', 
    save: function() { 
     // send updated information to server. 
    } 
}); 

Contacts.contactsList = Ember.ArrayController.create({ 
    content:[], 
    init: function() { 
     this.pushObject(Contacts.Person.create({ 
      first:'Tom', 
      last:'Riddle' 
     })); 
    } 
}); 

Mẫu:

<script type="text/x-handlebars"> 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" on="click"}}>Save</button> 
    </li> 
    {{/each}} 
</script> 

Vấn đề:

Vì vậy, ý tưởng trong đơn giản này kịch bản demo là nút "Lưu" cho mỗi bản ghi sẽ kích hoạt một hành động để lưu trạng thái của mô hình riêng của nó. Tuy nhiên, cách nhấn vào nút Save đưa ra một lỗi:

Uncaught TypeError: Cannot call method 'call' of undefined 

Giả định của tôi sẽ là quy định cụ thể "tiết kiệm" như hành động của nút sẽ ràng buộc nó vào save phương pháp trên mô hình của nó. Tuy nhiên, điều này không xuất hiện để được các trường hợp. Một số đối tượng khác dường như đang xử lý các thao tác nhấp chuột, trong đó trình xử lý "lưu" không được xác định. Am i thiếu cái gì ở đây? Làm thế nào tôi có thể làm cho mỗi nút của mục hàng gọi một trình xử lý trên mô hình của riêng nó?

Cảm ơn bạn đã giúp đỡ!

Answer 1

Bạn có thể xác định một mục tiêu của một hành động bằng cách thiết lập - bất ngờ - target tài sản, thấy http://jsfiddle.net/pangratz666/FukKX/:

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     {{#with this as model}} 
      <button {{action "save" target="model"}}>Save</button> 
     {{/with}} 
    </li> 
    {{/each}} 
</script>​ 

Các {{#with}} helper xung quanh hành động là cần thiết bởi vì bằng cách nào đó helper hành động không chấp nhận this như một target.

---

Nhưng lưu ý cho thiết kế của bạn: hành động nên được gọi trên chế độ xem hoặc trên bộ điều khiển. Mục tiêu là sau đó chịu trách nhiệm về thực hiện hành động hơn nữa như tiết kiệm, ...

Vì vậy, tôi sẽ thực hiện ví dụ của bạn như sau, xem http://jsfiddle.net/pangratz666/U2TKJ/:

tay lái:

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" target="Contacts.contactsController" }}>Save</button> 
    </li> 
    {{/each}} 
</script>​ 

Javascript:

Contacts.contactsController = Ember.Object.create({ 
    save: function(event) { 
     console.log('do something with: ', event.context); 
    } 
}); 

Answer 2

Có hai khả năng wa ys

{{#each answer in effort_reasons itemController="module_answer"}} 
{{/each}} 

Vì vậy, mỗi Item được điều khiển riêng của mình nơi mô hình là từng hạng mục (trong trường hợp này câu trả lời), điều này đặc biệt hữu ích cho một cái gì đó giống như một Xem Input nơi valueBinding sẽ cho kết quả trong ràng buộc tất cả các chế độ xem đầu với cùng giá trị. Lưu ý đây là lần duy nhất mà bộ điều khiển trong Ember là không độc thân, và đang gặp ID's khác nhau, nếu bạn muốn lưu giá trị của bạn trong bộ điều khiển ban đầu bạn có thể nhận được một tài liệu tham khảo qua

this.get('controller.parentController') 

bên itemController của bạn.

Hoặc bạn sử dụng cách tiếp cận hành động đề cập bên trong mỗi vòng lặp với

{{action "actionname" parameter paramter2...}}