Tôi nên giữ trạng thái lựa chọn cho danh sách ở đâu?

Question

Tôi đang sử dụng ember 1.0.0-pre4.

Tôi muốn hiển thị danh sách các phiên bản Mẫu. Người dùng có thể chọn nhiều mục nhập danh sách bằng cách nhấp vào nút hoặc hộp kiểm được hiển thị trong mỗi hàng.

Tôi đã quản lý để hiển thị danh sách. Nhưng tôi không biết cách quản lý trạng thái lựa chọn. Khi tôi đặt một cái gì đó như {{view Ember.Checkbox checkedBinding="isSelected"}} vào mẫu thì trạng thái lựa chọn sẽ được giữ trong mô hình của tôi. Nhưng tôi không nghĩ đây là nơi tốt nhất. Tôi nghĩ rằng trạng thái lựa chọn thuộc về bộ điều khiển hoặc trạng thái xem.

Bạn có thể cho tôi biết cách tốt nhất để lưu trữ và truy cập (nhiều) trạng thái lựa chọn danh sách không?

Answer 1

Một cách là chỉ cần giữ một danh sách thứ hai trong bộ điều khiển:

App.FooController = Ember.ArrayController.create({ 
    selectedContent: [], 
    selectToggle: function(event) { 
    var selectedContent; 
    selectedContent = this.get(selectedContent); 
    if (selectedContent.contains(event.context)) { 
     return this.set('selectedContent', selectedContent.without(event.context)); 
    } else { 
     return this.get('selectedContent').push(event.context); 
    } 
    } 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each foo in controller}} 
      <li {{action selectToggle foo}}>{{foo.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

Đó chỉ duy trì một danh sách riêng biệt trong bộ điều khiển và đẩy/xóa bỏ dựa trên hay không mục được chọn.

Bạn cũng có thể sử dụng Ember.ObjectProxy để tăng thêm các giá trị của đối tượng foo bằng thuộc tính "isSelected".

App.FooController = Ember.ArrayController.create({ 
    selectedContent: @get('content').map(function(item){ 
    Ember.ObjectProxy.create({ 
     content: item 
     isSelected: false 
    }); 
    }); 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each foo in controller.selectedContent}} 
      <li {{bindAttr class= "foo.isSelected"}}{{action selectToggle foo}}>{{foo.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

Sau đó, trong phương thức SelectToggle của bạn, bạn chỉ cần đặt thuộc tính được chọn của foo là thích hợp.