Powiązane listy sortowalne jQuery i kolekcje szkieletowe

Question

Nadal znajduję swoją drogę w Backbone i zawsze korzystałem z Prototype zamiast z jQuery, więc proszę wybacz mi, jeśli robię coś głupiego.

Próbuję utworzyć interfejs użytkownika zawierający kilka połączonych nieuporządkowanych list, na których każda lista sortable jest reprezentowana przez oddzielną kolekcję kręgosłupa. Używam szablonów ICanHaz i Moustache, ale to nie ma znaczenia dla mojego pytania.

Podczas przeciągania elementów między listami, jak najlepiej osiągnąć automatyczne aktualizowanie kolekcji (usunąć model z jednego i wstawić go do innego)? Obecnie próbuję użyć metod odbierania i usuwania w interakcji jQueryUI Sortable - czy jestem przynajmniej na właściwych liniach?

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

Wystarczy użyć Backbone.CollectionView .. to ma tę funkcjonalność wbudowany out w polu.

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

Jesteś na dobrej drodze. Prawdopodobnie będziesz chciał dodać gdzieś id każdego sortowalnego elementu do szablonu. Następnie, gdy otrzymasz zdarzenie, wiesz, który model dodać lub usunąć z kolekcji. Na przykład dodać ...

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

A w sortable rozmowy dostać atrybut id przez cel i nazywają Collection.add() lub usunąć()