链接的jQuery可排序列表和主干集合

Question

我仍然在使用Backbone找到自己的方式，过去我总是使用Prototype而不是jQuery，所以请原谅我，如果我正在做一些愚蠢的事情。

我正在尝试开发一个UI，其中包含几个连接的无序列表，其中每个sortable列表由单独的Backbone集合表示。我正在使用ICanHaz和胡须模板，但这对我的问题并不重要。

在列表之间拖动项目时，如何最好地实现集合的自动更新（从一个模型中删除模型并将其插入另一个模型）？我目前正在尝试使用jQueryUI Sortable交互中的接收和移除方法 - 我是否至少在正确的行？

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

只要使用Backbone.CollectionView ..它内置了这项功能的盒子。

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

你是在正确的轨道上。您可能想要将每个可排序元素的ID添加到模板的某处。然后，当您收到活动时，您就知道要从集合中添加或删除哪个模型。例如添加...

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

并在排序调用得到目标的id属性和调用Collection.add（）或remove（）