2011-10-07 40 views
12

Tôi đang làm việc trên một ứng dụng cần một biểu mẫu cho phép người dùng quản lý phân cấp các danh mục sản phẩm đi sâu tùy ý. Tôi có thể dễ dàng lấy dữ liệu lên trang, nhưng tôi bị mất một chút so với những gì tôi cần làm để làm một việc như vậy với backbone.js. Về cơ bản, tôi đang tìm kiếm các UL lồng nhau. Khi người dùng chọn một, tôi muốn họ có thể chỉnh sửa/xóa danh mục hoặc thêm danh mục khác bên dưới danh mục đó.Backbone.js và hệ thống phân cấp/cây

Tôi đang gặp sự cố khi tìm trường hợp trực tuyến, nơi ai đó có phân cấp sâu tùy ý của cùng một loại dữ liệu trong backbone.js. Tôi chỉ cần làm cho lớp mô hình của tôi có chứa một thể hiện của lớp sưu tập của tôi? Làm thế nào sẽ tiết kiệm được thực hiện? Tôi biết đây là một câu hỏi rộng, nhưng tôi chủ yếu cần một số gợi ý chung về cách tiếp cận (hoặc tốt hơn, một mẫu ở đâu đó mà tôi chưa xem).

+0

Các yếu tố lá là những sản phẩm mình? – papdel

+0

Tôi đã không nghĩ đến việc đó, nhưng bây giờ bạn đề cập đến nó, nó sẽ làm cho giao diện dễ sử dụng hơn. Tôi chỉ cố gắng để có được một cái gì đó để quản lý phân cấp danh mục cho thời điểm này. –

Trả lời

5

Bạn có thể lập mô hình cây làm tập hợp các mục có liên kết cha-con. Vì vậy, mô hình của bạn nên có một cái gì đó như thế này:

 id:   id, 
     parent_id: parent_id 

Sau đó xây dựng một cây từ bộ sưu tập bằng cách sử dụng các hàm gọi đệ quy trong JS. Dưới đây là một đoạn mã trực tiếp:

function buildTree(branch, list) { 
    //recursively builds tree from list with parent-child dependencies 
    if (typeof branch == 'undefined') return null; 
    var tree = []; 
    for(var i=0; i<branch.length; i++)  
    tree.push({ 
     item: branch[i], 
     children: buildTree(list[ branch[i].id ], list) 
    }); 
    return tree; 
} 

Trước khi gọi các mục nhóm chức năng bằng cách sử dụng PARENT_ID underscore.js (mà là một điều kiện tiên quyết cho backbone.js anyway), và sau đó gọi:

var list = _.groupBy(arrayOfItems,'parent_id'); 
    var tree = buildTree(list[0],list); 

Cuối cùng, làm cho cây sử dụng các hàm gọi đệ quy một lần nữa (không có ví dụ nào ở đây, nhưng tôi tin rằng bạn có ý tưởng).

PS. Thêm/lưu một mục sẽ không thành vấn đề nếu bạn cho biết parent_id đúng.

+0

Giải pháp tuyệt vời, cảm ơn! – Casey

0

Bạn có thể tìm câu trả lời trên liên kết này.

Backbone with a tree view widget

Bạn có nhiều cách để tạo cây phân cấp. Một trong số họ được đăng trong câu hỏi của tôi. Nếu bạn muốn, hãy thử nó! Tôi đã sử dụng Backbone.js và Epoxy.js để tạo nó. Liên kết đến Epoxy.js

http://epoxyjs.org/index.html

Thư viện này cung cấp cho bạn một cách dễ dàng để ràng buộc các sự kiện khác nhau những gì chứa cây

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