JQuery UI Sıralanabilir kullanarak sıralamak mümkün olmak istiyorum backbone.js bir koleksiyonum var. Hiçbir şey fantezi, sadece sıralama yapabilmek için elimde bir liste var.

Sorun sıralanmış sonra eşyalar mevcut sipariş almak ve tahsilat için iletişim nasıl emin değilim. Sıralanabilir kendisi seri hale getirmek olabilir, ama bu beni koleksiyonu vermem gereken model veri vermiyor.

İdeal olarak, ben bir şey yapabilmek için sadece bir dizi mevcut düzenin modelleri Koleksiyonu ve kullanım sıfırlama yöntemi için toplama, ama nasıl emin değilim almak için mevcut sipariş. Geçerli model emriyle bir dizi almak için herhangi bir fikir veya örnekler lütfen paylaşın.

JQuery UI Sıralanabilir bir item düşmesi öğe görünümünde bir olayı tetiklemek için kullanarak bunu yaptım. Sonra koleksiyon görüntülemek için bağlı olduğu veri modeli içeren kalem görünümünde başka bir olay tetikleyebilir. Toplama görüntüleyin sıralama düzenini güncellenmesinden sorumlu olabilir.

Örnek çalışma

http://jsfiddle.net/7X4PX/260/

jQuery UI Sıralanabilir

$(document).ready(function() {
    $('#collection-view').sortable({
        // consider using update instead of stop
        stop: function(event, ui) {
            ui.item.trigger('drop', ui.item.index());
        }
    });
});

stop olay veri olarak maddenin Endeksi (jQuery UI tarafından sağlanan) ile madde için DOM düğümü drop tetikleyen bir işlev bağlı.

Öğe görünümü

Application.View.Item = Backbone.View.extend({
    tagName: 'li',
    className: 'item-view',
    events: {
        'drop' : 'drop'
    },
    drop: function(event, index) {
        this.$el.trigger('update-sort', [this.model, index]);
    },        
    render: function() {
        $(this.el).html(this.model.get('name')   ' ('   this.model.get('id')   ')');
        return this;
    }
});

Bırak olay verileri [this.model, index] madde manzara DOM düğüm update-sort bir olayı tetikler drop işlevine bağlıdır. Mevcut model geçiyoruz demektir ve her kim bu dizin (jQuery UI sıralanabilir) update-sort olaya bağlı.

Öğeleri (toplama) görünümü

Application.View.Items = Backbone.View.extend({
    events: {
        'update-sort': 'updateSort'
    },
    render: function() {
        this.$el.children().remove();
        this.collection.each(this.appendModelView, this);
        return this;
    },    
    appendModelView: function(model) {
        var el = new Application.View.Item({model: model}).render().el;
        this.$el.append(el);
    },
    updateSort: function(event, model, position) {            
        this.collection.remove(model);

        this.collection.each(function (model, index) {
            var ordinal = index;
            if (index >= position) {
                ordinal  = 1;
            }
            model.set('ordinal', ordinal);
        });            

        model.set('ordinal', position);
        this.collection.add(model, {at: position});

        // to update ordinals on server:
        var ids = this.collection.pluck('id');
        $('#post-data').html('post ids to server: '   ids.join(', '));

        this.render();
    }
}); 

Items update-sort olaya bağlı ve işlevi veri olay (model ve dizin) tarafından kabul kullanır. Model koleksiyonundan kaldırılır, ordinal öznitelik kalan her öğe güncellenen kimliği öğeleri sipariş durumunu saklamak için sunucuya gönderilir.

Toplama

Application.Collection.Items = Backbone.Collection.extend({
    model: Application.Model.Item,
    comparator: function(model) {
        return model.get('ordinal');
    },
});

Koleksiyon comparator fonksiyon ordinal koleksiyonu olan tanımlamıştır. Bu "" ordinal öznitelik değeri koleksiyonu şimdi. varsayılan sipariş olarak senkronize öğeleri işlenmiş sipariş tutar

Biraz efor sarf çoğaltma, not: model bir toplama jsfiddle gibi benzer bir işlevi varsa ve koleksiyonuna kaldırıldı eklenmesi gerek yok. Ayrıca görünüm yeniden oluşturmak için kendisi gerek olmayabilir.

Notbaşka bir şey göre cevap, benim duygu koleksiyonu doğrudan yerine güncelleştirilmesi için gerekli olan ürün modeli örneği haberdar etmek daha doğru olduğuydu. Her iki yaklaşım için de geçerlidir. Diğer cevabı burada doğrudan model-ilk yaklaşım yerine toplama gider. Senin için daha mantıklı, hangisi seç.