Tiện ích Javascript lấy cảm hứng từ iPhone UITableView?

Question

UITableView của Cocoa Touch cho phép người dùng cuộn qua số lượng lớn hàng dữ liệu có hiệu suất tốt vì nó tái chế các hàng trong bảng. Thay vì tạo một phần tử GUI cho mỗi hàng dữ liệu, một số hàng bảng được tạo và chỉ được cập nhật với dữ liệu có liên quan khi người dùng cuộn, tạo ảo giác điều hướng lên và xuống một số lượng lớn các hàng trong bảng.

Có ai thấy điều này được thực hiện trong javascript không? Có một plugin có sẵn ở bất cứ nơi nào mà sẽ làm điều này cho tôi?

Answer 1

Thực ra, thuật toán không khó chút nào. Nếu bạn biết javascript, bạn sẽ có thể viết này. Thuật toán chỉ cần chiều cao của ô và chiều cao của bảng.

Tôi chỉ biết hai điều sau: Khung javascript của Dashcode của Apple có triển khai Bảng. Bạn có thể xem và xem đó có phải là thứ bạn cần không. Hoặc khung Cappuccino về cơ bản là Objective-J nhưng đằng sau hậu trường là Javascript.

Answer 2

Tôi không nghĩ rằng điều này là cần thiết trong JS.

Nó được thực hiện theo cách này trong Obj-C để không phân bổ và bắt đầu chế độ xem trong các hàng trong bảng.

Trong JS các hàng chỉ là văn bản (không cần phân bổ) mà bạn nên giữ ở đâu đó - bạn có thể chỉ giữ văn bản không có HTML và bọc nó với HTML khi hàng hiển thị, nhưng tôi không nghĩ xứng đáng với thời gian của bạn.

Tôi không tin rằng cách tiếp cận này sẽ làm cho bảng HTML nhanh hơn ...

Answer 3

infinity.js hoạt động tốt. Nó sẽ tự động tải 'trang' đằng sau hậu trường cho bạn sự xuất hiện mà danh sách đã được tải đầy đủ.

Thông tin chi tiết có thể được tìm thấy trên trang Github của họ - https://github.com/airbnb/infinity

Ngoài ra, tôi đã chia hai dự án cập nhật nó để làm việc với Zepto. Tôi cũng thiết lập để sử dụng bất kỳ div cuộn nào (được thiết lập với tràn: scoll) với lớp 'có thể cuộn' - https://github.com/elliotcw/infinity

Tôi nên thêm rằng tôi đã thực hiện những thay đổi này vì điều này rất tốt cho danh sách lớn trên thiết bị di động làm chậm khi bạn có nhiều yếu tố phức tạp trên trang.

Answer 4

Tôi cũng đang tìm kiếm điều này và infinityjs [1] dường như không giống giao diện tương tự như UITableView. Và đó là một vấn đề đối với kịch bản của tôi rằng infinityjs yêu cầu rằng phần tử chứa các mục danh sách đã được thêm vào DOM.

MegaList [2] đến gần với những gì tôi muốn. Andrew (tác giả) đã thực hiện một công việc tuyệt vời để thiết kế nó cho di động đầu tiên, với sự hỗ trợ cảm ứng, vv Một điều đáng lưu ý đối với tôi là nó có vẻ là một mô hình danh sách lựa chọn nghiêm ngặt và làm nhiều hơn một chút để làm (ví dụ như ràng buộc để thay đổi kích thước các sự kiện và cố gắng xử lý tự động).

Vì vậy, tôi bắt đầu viết một thành phần danh sách khung hình, cũng được mô hình hóa sau khi UITableView của iOS. Đó là một công việc đang được tiến hành và tôi chỉ cần đưa vào những gì tôi cần. Các nguồn đang ở đây https://github.com/shyam-habarakada/js-virtual-list-view.Tôi đưa vào chỉ là những gì tôi cần như tôi đi, và người đóng góp là cần thiết :-)

[1] http://airbnb.github.io/infinity/

[3] https://github.com/triceam/MegaList

Answer 5

Clusterize.js làm chính xác điều đó.

Nhỏ và hoạt động với bất kỳ thẻ nào (bảng, danh sách, số div)