2011-12-21 33 views
26

Tôi khá mới đối với Backbone và có câu hỏi sau:Mô hình thay đổi xương sống của View

Tôi có một bộ sưu tập mô hình.

Tôi có chế độ xem bộ sưu tập hiển thị các tab (với chế độ xem cho từng mô hình trong bộ sưu tập).

Tôi có chế độ xem cho mô hình (đối với nội dung).

Tôi có bộ định tuyến có tuyến đường.

Những gì tôi đang cố gắng để đạt được là một chức năng như http://jqueryui.com/demos/tabs/

tôi bấm vào một tab (mô hình của bộ sưu tập) và sau đó muốn vượt qua các mô hình để xem nội dung có thể thay đổi nó và phản ánh những thay đổi trong bộ sưu tập .

tôi đã đưa ra bốn giải pháp:

Trong router:

'switchCommunity': function(id) { 
     // (a) set new model attributes 
     this.view.community.model.set(communities.get(id)); 

     // (b) replace model 
     this.view.community.model = communities.get(id); 

     // (c) a custom function of the view changes its model 
     this.view.community.changeModel(communities.get(id)); 

     // (d) a new view 
     this.view.community = new View({ 
      model: communities.get(id) 
     }) 
} 

Vấn đề ở đây là

  • (a) không phản ánh những thay đổi trong mô hình trong bộ sưu tập

  • (b) không kích hoạt (thay đổi) sự kiện, vì ràng buộc trong hàm initialize của quan điểm không bao giờ gây nên, bởi vì nó là một mô hình hoàn toàn mới

  • (c) có vẻ giống như một hack với tôi

  • (d) mọi i click vào một tab mà chế độ xem mới được tạo (đây có phải là một sự cố về hiệu suất không?)

Tốt nhất ở đây là gì?

+2

Tôi sẽ thử (d) - điều này không trở thành vấn đề hiệu suất nếu bạn xóa chế độ xem cũ trước. – swatkins

+0

in (d) Tôi ghi đè lên this.view.community của tôi là đủ hoặc tôi có phải loại bỏ nó bằng tay? – Riebel

+1

Điều này sẽ là đủ, miễn là các yếu tố dom cũ không treo xung quanh và có người nghe sự kiện ràng buộc với họ, họ nên được thu gom rác thải. Tôi muốn xác minh với firebug, nhưng tôi nghĩ rằng đó là chính xác. – swatkins

Trả lời

15

Một trong những giải pháp của bạn là gần không sao đâu: D

Dưới đây là những gì bạn muốn:

this.view.community.model.set(communities.get(id).toJSON()); 

Và điều này sẽ kích hoạt model.on ("thay đổi") là tốt.

+0

'community.get (id) .attributes' cũng hoạt động và trông sạch hơn với tôi. –

1

Plugin Backbone.Marionette cung cấp giải pháp hợp lý cho sự cố của bạn.

Nó cung cấp chức năng cho Khởi tạo ứng dụng, Quản lý chế độ xem và Tổng hợp sự kiện.

Về bản chất, nó sẽ làm giảm đau và ẩn nhiều chế độ xem.

Bạn có thể đọc số này blog post để tìm hiểu thêm về điều này.

+0

Tuyệt đối, nhưng hãy nhớ rằng plugin khá mới và có thể thay đổi một vài lần trong tương lai không xa như vậy – Sander

8

Tại sao bạn nghĩ (c) là hack? Nó có vẻ như là một nơi tốt để đóng gói các unbinding của mô hình cũ, và kết nối lên mới.

0

Câu trả lời ngắn gọn là bạn nên sử dụng d.Có là không phải là biểu diễn nhưng trừ khi bạn nhận thấy sự chậm lại trong giao diện người dùng, bạn không nên lo lắng quá nhiều. Bạn nên mã một cái gì đó mà 1. luôn luôn hoạt động 2. không mất nhiều thời gian để mã, do đó bạn có thể chuyển sang mã hóa các tính năng quan trọng khác.

Nếu/khi bạn cần thêm hiệu suất thì bạn có thể mất thêm thời gian để làm c. Để có hiệu suất cao nhất, bạn không nên phá hủy và tái xuất bản mẫu. Bạn nên sử dụng jquery để tự tìm các phần tử trên DOM và thay thế chúng bằng mô hình mới. Khi bạn gọi:

view.$el = _.template(string, model); 

Mã rất ít nhưng rất nhiều công việc cho trình duyệt. Việc thay thế DOM bằng một mô hình mới có hiệu suất cao hơn nhiều.

Nếu bạn cần biểu diễn nhiều hơn, bạn có thể sử dụng tính năng nhóm đối tượng. Tôi đã làm việc trên một PerfView cho xương sống mà thực hiện rất nhiều tối ưu hóa. https://github.com/puppybits/BackboneJS-PerfView Có nhận xét trong mã với nhiều phương pháp hay nhất để duy trì hiệu suất trình duyệt tốt nhất.

Các vấn đề liên quan