Danh sách sắp xếp jQuery được liên kết và bộ sưu tập Backbone

Question

Tôi vẫn đang tìm đường với Backbone và tôi luôn sử dụng Prototype thay vì jQuery trong quá khứ vì vậy hãy tha thứ cho tôi nếu tôi đang làm điều gì đó ngu ngốc.

Tôi đang cố gắng phát triển giao diện người dùng chứa một số danh sách có thứ tự được kết nối mà mỗi danh sách sortable được thể hiện bằng bộ sưu tập xương sống riêng biệt. Tôi đang sử dụng các mẫu ICanHaz và Mustache nhưng điều đó không quan trọng đối với câu hỏi của tôi.

Khi kéo các mục giữa các danh sách, làm thế nào tốt nhất tôi sẽ đạt được việc cập nhật tự động các bộ sưu tập (loại bỏ một mô hình từ một và chèn nó vào một bộ khác)? Tôi hiện đang cố gắng sử dụng các phương thức nhận và loại bỏ trong tương tác jQueryUI Sortable - tôi có ít nhất là trên các dòng bên phải không?

var WS = {}; 

(function(ns) { 
    ns.Item = Backbone.Model.extend(); 

    ns.Content = Backbone.Collection.extend({ 
     model: ns.Item, 
     url: location.href, 
     initialize: function(el) { 
      this.el = $(el); 
      this.deferred = this.fetch(); 
     }, 
     recalculate: function() { 
      var count = this.length; 
      this.el.next(".subtotal").html(count); 
     }, 
     setOrder: function() { 
      $.ajax({ 
       url: this.url + "/reorder", 
       type: "POST", 
       data: "tasks=" + $(this.el).attr("id") + "&" + this.el.sortable("serialize") 
      }); 
     } 
    }); 

    ns.ContentRow = Backbone.View.extend({ 
     tagName: "li", 
     className: "item", 
     events: { 
      "click .delete": "destroy" 
     }, 
     initialize: function(options) { 
      _.bindAll(this, "render", "destroy"); 
      this.model.bind("change", this.render); 
      this.model.view = this; 
     }, 
     render: function() { 
      var row = ich.item(this.model.toJSON()); 
      $(this.el).html(row); 
      return this; 
     }, 
     destroy: function() { 
      if (confirm("Really delete?")) { 
       this.model.destroy({ 
        success: function(model, response) { 
         $(model.view.el).remove(); 
        }, 
        error: function(model, response) { 
         console.log(response); 
        } 
       }); 
      } 
     } 
    }); 

    ns.ListView = Backbone.View.extend({ 
     initialize: function(collection) { 
      this.el = collection.el; 
      this.collection = collection; 

      this.collection.bind("add", this.addOne, this); 
      _.bindAll(this, "addOne"); 

      this.el.sortable({ 
       axis: "y", 
       connectWith: ".tasks", 
       receive: _.bind(function(event, ui) { 
        // do something here? 
       }, this), 
       remove: _.bind(function(event, ui) { 
        // do something here? 
       }, this), 
       update: _.bind(function(event, ui) { 
        var list = ui.item.context.parentNode; 
        this.collection.setOrder(); 
       }, this) 
      }); 
     }, 
     insert: function(item) { 
      var prefix = this.el.parentsUntil('ul').parent().attr("id"), 
       view = new ns.ContentRow({ 
        model: item, 
        id: prefix + "_" + item.id 
       }); 

      this.el.append(view.render().el); 
     }, 
     addOne: function(item) { 
      if (item.isNew()) { 
       item.save({}, { 
        success: _.bind(function(model, response) { 
         // I should set id from JSON response when live 
         model.set({ id: this.collection.length }); 
         this.insert(model); 
        }, this) 
       }); 
      } else { 
       this.insert(item); 
      } 
     }, 
     addAll: function() { 
      this.collection.each(this.addOne); 
     }, 
     render: function() { 
      this.collection.deferred.done(_.bind(function() { 
       this.addAll(); 
      }, this)); 
     } 
    }); 

    ns.AppView = Backbone.View.extend({ 
     lists: [], 
     initialize: function(holder) { 
      holder.find("ul").each(_.bind(function(index, list) { 
       var Items = new WS.Content(list), 
        App = new WS.ListView(Items); 

       App.render(); 

       this.lists.push(Items); 
      }, this)); 
     } 
    }); 

})(WS); 

$(document).ready(function() { 
    var App = new WS.AppView($("#tasks")); 
}); 

Answer 1

Chỉ cần sử dụng Backbone.CollectionView .. nó có chức năng này được xây dựng trong ra ngoài hộp.

var listView = new Backbone.CollectionView({ 
    el : $("#list1"), 
    sortable : true, 
    sortableOptions : { 
     connectWith : "#list2" 
    }, 
    collection : new Backbone.Collection 
}); 

var listView = new Backbone.CollectionView({ 
    el: $("#list2"), 
    sortable : true, 
    sortableOptions : { 
     connectWith : "#list1" 
    }, 
    collection : new Backbone.Collection 
}); 

Answer 2

Bạn đang đi đúng hướng. Có thể bạn sẽ muốn thêm id của từng phần tử có thể sắp xếp vào mẫu ở đâu đó. Sau đó, khi bạn nhận được sự kiện, bạn biết mô hình nào cần thêm hoặc xóa khỏi bộ sưu tập. Ví dụ thêm ...

<div data-id={{id}}> ... my thing ... </div> 

Và trong cuộc gọi có thể phân loại được thuộc tính id của đối tượng và gọi Collection.add() hoặc remove()