Làm thế nào để vượt qua các sự kiện giữa các bộ điều khiển trong Emberjs? Cập nhật: Cách thiết kế tự động điền trong Ember

Question

Tình huống: Một tiện ích tự động điền với bộ điều khiển và chế độ xem của riêng nó sao cho thành phần mô-đun có thể được hiển thị ở bất kỳ chế độ xem nào khác với {{render "autocomplete"}} hoặc có thể {{control}} trợ giúp khi nó được chuyển ra khỏi giai đoạn thử nghiệm. Để làm cho tự động hoàn thành độc lập với mọi thứ khác, nó không nên biết về bộ điều khiển chính hoặc hành động nào xảy ra khi một mục được chọn.

Tôi đã cố gắng tìm cách sử dụng mixin Ember.Evented để tôi có thể kích hoạt sự kiện từ tự động hoàn thành như itemSelected, sau đó có thể bong bóng lên và bị bắt bởi chế độ xem hoặc bộ điều khiển chính.

Vì vậy, như mọi khi, tài liệu của Ember thiếu. Đặc biệt là khi nói đến Ember.Evented. (Để công bằng, tài liệu đã đi một chặng đường dài, nhưng tôi vẫn muốn nhiều hơn. Họ nói Công ước về cấu hình mà không cung cấp quy ước!) Dù sao, đủ phàn nàn, tài liệu cho thấy sự kiện xảy ra trên các đối tượng chung và tôi tìm thấy bài đăng này sâu hơn một chút: Does EmberJs support publish/subscriber eventing pattern? nhưng tôi nghĩ rằng một ví dụ thực tế hơn với bộ điều khiển, chế độ xem, tuyến đường và thành phần như tự động hoàn thành sẽ tuyệt vời.

Tôi nghĩ rằng các loại sự kiện này được cho là trách nhiệm của các khung nhìn nhưng điều đó không có tác dụng nên tôi cũng đặt mixin lên bộ điều khiển. Điều này sẽ có ý nghĩa khi bạn nhìn thấy jsFiddle

Trong đó, bạn sẽ thấy bộ điều khiển tự động hoàn thành giả nhận một tập hợp nội dung tĩnh từ vật cố và hiển thị hai nút cho mỗi mục mà bạn có thể nhấp để kích hoạt sự kiện từ chế độ xem hoặc bộ điều khiển. Trong ví dụ thực, đầu vào trong hộp văn bản sẽ được quan sát và nội dung sẽ được cập nhật để trình bày các đề xuất khác nhau dựa trên đầu vào nhưng điều đó không quan trọng đối với ví dụ này.

jsFiddle: http://jsfiddle.net/wCfb9/ Tôi nghi ngờ hầu hết các dòng: this.on("myEvent", this.addItem); kể từ khi chức năng kích hoạt sự kiện này rõ ràng được gọi, nhưng nó như thể sự kiện này không tuyên truyền hoặc bộ điều khiển chỉ số và xem là không thực sự thiết lập đúng cách để trả lời sự kiện.

Dưới đây là những câu hỏi chính:

1. gì tôi cần phải thay đổi để điều khiển chỉ số có thể đáp ứng với một sự kiện kích hoạt bởi các autocomplete?

2. Cách MVC phù hợp nhất để đạt được điều này là gì? Nên kích hoạt/nhận được trên xem/điều khiển?

3. Có cách nào tốt hơn để thực hiện việc này không?

Side lưu ý: giải pháp hiện tại của tôi cho điều này là thêm một needs: ["index"] trong bộ điều khiển tự động hoàn và thay vì kích hoạt các sự kiện, tôi kêu gọi chỉ rõ ràng phương pháp trong điều khiển chỉ số từ bộ điều khiển tự động hoàn. Điều này có nhiều vấn đề, đầu tiên nó là một sự kết nối chặt chẽ giữa các bộ điều khiển, và không mở rộng tốt nếu việc tự động hoàn thành được cho là ảnh hưởng đến nhiều bộ điều khiển hoặc được tái sử dụng ở nơi khác và phải được cấu hình lại, v.v ...

Hy vọng tôi giải thích rằng đủ rõ ràng. Tất cả trợ giúp đều được đánh giá cao.

Answer 1

Câu hỏi hay, tuyệt vời.

Để làm cho tự động hoàn toàn độc lập với mọi thứ khác, không nên biết về bộ điều khiển chính hoặc hành động nào xảy ra khi một mục được chọn.

Có, tôi nghĩ bạn đang đi đúng hướng trong việc cố gắng giữ mọi thứ càng cô lập càng tốt.

Có cách nào tốt hơn để thực hiện việc này không?

Tôi nghĩ có cách để đi là sử dụng tính năng 'thành phần' mới đã được giới thiệu trong RC6. Xem Ember Component API Docs để biết chi tiết.

Với cách tiếp cận thành phần, bạn có thể đáp ứng mục tiêu tự động hoàn thành độc lập với bộ điều khiển chính và điều gì sẽ xảy ra khi một mục được chọn. Nó khá gần với cách chế độ xem Ember.Select tích hợp hoạt động. Vì vậy, ví dụ:

{{app-autocomplete items=model selectedItem=selectedPerson}} 

Ở đây tôi đã thiết lập mục của autocomplete và tài sản SelectedItem liên kết với giá trị trên bộ điều chỉnh dòng. tự động điền ứng dụng không biết nội dung nào ở phía bên kia của các liên kết đó hoặc cách người gọi sẽ phản ứng khi các giá trị thay đổi. Bộ điều khiển chỉ mục của bạn có thể quan sát thuộc tính được chọn của riêng nó và phản ứng khi nó thay đổi. Một cái gì đó như thế này:

App.IndexController = Ember.ArrayController.extend({ 
    selectedPerson: null, 
    selectedPersonDidChange: function() { 
     Ember.Logger.log("Index.contoller addItem: ", this.get('selectedPerson').toString()); 
    }.observes('selectedPerson'), 
}); 

Thành phần này cũng rất đơn giản. Nó hy vọng nó là tài sản items để chứa một mảng các đối tượng với một name và khi một được nhấp vào nó đặt thuộc tính riêng của nó là selectedItem.

<script type="text/x-handlebars" id="components/app-autocomplete"> 
    {{input}} 
    {{#each item in items}} 
    <li><button {{action itemSelected item}}>{{item.name}}</button></li> 
    {{/each}} 
</script> 

App.AppAutocompleteComponent = Ember.Component.extend({ 
itemSelected: function (item) { 
    this.set("selectedItem", item); 
     Ember.Logger.log("component.itemSelected: myEvent triggered wit h: ", item.toString()); 
} 
}); 

Full ví dụ ở đây: http://jsfiddle.net/dKUf4/

Answer 2

Dựa trên đề nghị Mike Grassotti của chúng tôi đang nghĩ đến Ember.Evented không phải là thực sự là giải pháp phù hợp và bắt đầu điều tra {{}} kiểm soát và Ember.Component.

Tôi vẫn không chắc chắn về liên kết jsFiddle mà anh ấy đăng, nhưng tôi có đủ thông tin từ bài đăng của anh ấy và tạo jsBin để mô phỏng cả nỗ lực sử dụng {{control}} và sử dụng Ember.Component. Có những ưu và khuyết điểm đối với mỗi người nhưng cuối cùng, Ember.Component đã thắng vì {{control}} không ràng buộc đúng cách.

Xem: http://jsbin.com/ehokak/3/ (Tôi không thể tìm ra cách để thiết lập ENV.EXPERIMENTAL_CONTROL_HELPER trong jsFiddle đó là lý do tôi đã sử dụng jsBin và tôi đã kết thúc thích jsBin thêm ...)

Trong đó bạn sẽ thấy hai tự động hoàn thành. Một thực hiện với trình trợ giúp {{control}} sử dụng một AutocompleteController và AutocompleteView và một với Ember.Component như Mike Grassotti đã đề xuất.

# 1 Sử dụng {{kiểm soát}} helper:

Ưu điểm: Tôi thích ý tưởng của việc có một bộ điều khiển cho autocomplete bởi vì tôi nghĩ đó là một tách tốt hơn các mối quan tâm/trách nhiệm duy nhất. Bộ điều khiển tự động hoàn tất nên biết cách xử lý văn bản trong hộp nhập, cách gửi yêu cầu và phân tích cú pháp dữ liệu nếu cần.

Nhược điểm: Vấn đề đầu tiên tôi gặp phải là trình trợ giúp điều khiển dường như yêu cầu một mô hình. Tuy nhiên, bộ điều khiển chỉ mục không nên quan tâm loại mô hình nào sử dụng tự động hoàn thành, tất cả những gì cần biết là nó sẽ nhận được mục được chọn trên thuộc tính mà chúng tôi chọn để liên kết. Xem: controlItemSelectedBinding="itemSelected1"

Vấn đề thứ hai là nút chặn hiển thị là có vẻ như các ràng buộc của trình trợ giúp kiểm soát không hoạt động như mong đợi. Bởi vì điều này, Index Controller không bao giờ quan sát sự thay đổi trên itemSelected1. Tôi đã nhầm lẫn về cách viết các ràng buộc trên helper điều khiển vì chúng khác nhau trên các thành phần. Một số sử dụng * Hậu tố ràng buộc, dấu ngoặc kép trên các giá trị, vv và tôi đã thử tất cả các kết hợp và không ai trong số họ làm việc. Tôi không chắc đó là một lỗi hay một tính năng, nhưng nó gần giống như các ràng buộc là một chiều.

# 2 Sử dụng Ember.Component:

Ưu điểm: Nó thực sự làm việc! Như bạn có thể thấy, có một số mã giả để cập nhật nội dung khi bạn nhập vào hộp nhập liệu và khi bạn nhấp vào nút bên cạnh mục, nó đặt biến số componentItemSelected cục bộ và vì điều này bị ràng buộc với IndexControllers.itemSelected2, thay đổi được quan sát và bộ điều khiển chỉ mục có thể thực hiện hành động thích hợp.

Nhược điểm: tôi không thích ý tưởng của các thành phần chịu trách nhiệm làm việc với các mô hình vv vì nó linh kiện hiểu biết của tôi có nghĩa vụ phải được mở rộng quan điểm, nhưng xem xét không có sự thay thế thực tế đây là người chiến thắng theo mặc định.

Một lần nữa, xin cảm ơn Mike về mẹo sử dụng Ember.Component.