Cách tốt nhất để tạo một mô hình 'được chọn' trong bộ sưu tập Backbone.js là gì?

Question

Tôi có một bộ sưu tập các mô hình trong ứng dụng Backbone.js của mình.

Đó là danh sách các mục mà bạn có thể di chuột qua hoặc di chuyển xung quanh bằng bàn phím.

Nếu chuột lơ lửng hoặc nếu điều hướng bàn phím có mục được chọn, cả hai sẽ thực hiện tương tự: đặt mục/mẫu cụ thể đó thành 'đã chọn'.

Vì vậy, trong mô hình của tôi, tôi có một thuộc tính cơ bản gọi là

selected: false 

Khi nó quét qua, hoặc chọn với bàn phím, điều này sau đó sẽ được

selected: true 

Tuy nhiên, tốt nhất là gì cách để đảm bảo rằng khi một mô hình này là đúng, những người khác là tất cả sai?

Tôi hiện đang thực hiện một điều cơ bản về đạp xe qua từng mô hình trong bộ sưu tập và sau đó đặt mô hình được chọn là đúng. Nhưng tôi tự hỏi nếu có một cách tốt hơn, hiệu quả hơn để làm điều này?

Answer 1

Được chọn có vẻ là trách nhiệm ngoài phạm vi của mô hình. Khái niệm được chọn ngụ ý rằng có những người khác, nhưng một mô hình chỉ có thể lo lắng về bản thân nó. Như vậy, tôi muốn xem xét việc chuyển trách nhiệm này đến nơi mà quan điểm của nhiều mô hình và có một mô hình được chọn có vẻ tự nhiên hơn và được mong đợi hơn.

Vì vậy, hãy cân nhắc đặt trách nhiệm này vào bộ sưu tập dưới dạng liên kết. Vì vậy, this.selected sẽ trỏ đến mô hình được chọn. Và sau đó bạn có thể thêm một phương thức để trả về mô hình đã chọn trong một bộ sưu tập.

Ngoài ra, bạn có thể cung cấp trách nhiệm này cho chế độ xem. Bạn có thể làm điều này nếu sự chọn lọc của một mô hình hoàn toàn là một mối quan tâm trong lớp View.

Sản phẩm phụ loại bỏ trách nhiệm khỏi mô hình là bạn loại bỏ sự cần thiết phải chu kỳ thông qua toàn bộ bộ sưu tập khi một mô hình mới được chọn.

Answer 2

Tôi đã làm một việc như ông Eisenhauer đề xuất. Tôi cũng muốn khái niệm về dữ liệu được phân trang. Không thực sự muốn kết hợp trong số trang đã chọn, v.v. vào bộ sưu tập, vì vậy tôi đã tạo một "mô hình" cho dữ liệu bảng và gọi nó là Ảnh chụp nhanh. Một cái gì đó như thế này:

JobSummary = Backbone.Model.extend({}); 

JobSummaryList = Backbone.Collection.extend({ 
    model: JobSummary 
}; 

JobSummarySnapshot = Backbone.Model.Extend({ 
    defaults: { 
    pageNumber: 1, 
    totalPages: 1, 
    itemsPerPage: 20, 
    selectedItems: new JobSummaryList(), // for multiple selections 
    jobSummaryList: new JobSummaryList() 
    } 
}); 

Answer 3

Đây là cách tôi đang làm. Bộ sưu tập lưu trữ một tham chiếu đến mô hình được chọn, nhưng trạng thái được giữ trong mô hình. Điều này sau đó có thể được điều chỉnh để cho phép thêm một thuật toán phức tạp hơn để lựa chọn mô hình nào được chọn.

JobSummary = Backbone.Model.extend({ 

    setSelected:function() { 
    this.collection.setSelected(this); 
    } 

}); 

JobSummaryList = Backbone.Collection.extend({ 
    model: JobSummary, 

    initialize: function() { 
    this.selected = null; 
    }, 

    setSelected: function(jobSummary) { 
    if (this.selected) { 
     this.selected.set({selected:false}); 
    } 
    jobSummary.set({selected:true}); 
    this.selected = jobSummary; 
    } 
}; 

Answer 4

Kiểm tra Backbone.CollectionView, bao gồm hỗ trợ chọn mô hình khi chúng được nhấp ra khỏi hộp. Trường hợp di chuột mà bạn có thể triển khai bằng phương thức setSelectedModel.

Answer 5

Bạn có thể muốn có một cái nhìn tại hai thành phần của tôi:

• Backbone.Select
• Backbone.Cycle

Backbone.Select có diện tích bề mặt tối thiểu. Có ít phương pháp nhất có thể được thêm vào đối tượng của bạn. Ý tưởng là bạn sẽ có thể sử dụng Backbone.Select mixins khá nhiều ở khắp mọi nơi, với một gần như bằng không nguy cơ xung đột.

Backbone.Cycle được xây dựng trên đầu Backbone.Select. Nó thêm các phương thức điều hướng và một vài chuông và còi. Nó có lẽ là sự lựa chọn tốt hơn cho một dự án greenfield.