jquery-ui – 链接的jQuery可排序列表和Backbone集合

我仍然在寻找BACkbone的方式,过去我总是使用Prototype而不是jQuery,所以请原谅我,如果我做的事情很愚蠢.

我正在尝试开发一个包含多个连接的无序列表的UI,其中每个可排序列表由单独的BACkbone集合表示.我正在使用ICanHaz和Mustache模板,但这对我的问题并不重要.

在列表之间拖动项目时,如何最好地实现集合的自动更新(从一个模型中删除模型并将其插入另一个模型)？我目前正在尝试在jQueryUI Sortable交互中使用receive和remove方法 – 我至少在正确的行上吗？

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(".sub@R_599_10586@l").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,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"));
});

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

var listView = new BACkbone.CollectionView( {
  el: $( "#list2" ),sortabLeoptions : {
      connectWith : "#list1"
  },collection : new BACkbone.Collection
} );