保存jQuery UI的可排序的以Backbone.js的集合 [英] Saving jQuery UI Sortable's order to Backbone.js Collection

问题描述

我有一个Backbone.js的集合，我希望能够使用jQuery UI的可排序进行排序。没什么特别，我只是说，我想能够排序列表。

I have a Backbone.js collection that I would like to be able to sort using jQuery UI's Sortable. Nothing fancy, I just have a list that I would like to be able to sort.

问题是，我不知道如何分类之后获得项目的当前秩序，传达到集合中。排序可以序列化本身，而是这不会给我我需要给到集合中的模型数据。

The problem is that I'm not sure how to get the current order of items after being sorted and communicate that to the collection. Sortable can serialize itself, but that won't give me the model data I need to give to the collection.

在理想情况下，我希望能够只得到集合中的模型的当前订单的数组，并使用重置方法的集合，但我不知道如何得到目前的订单。请分享任何想法或例子说明如何得到阵列与现款车型的订单。

Ideally, I'd like to be able to just get an array of the current order of the models in the collection and use the reset method for the collection, but I'm not sure how to get the current order. Please share any ideas or examples for getting an array with the current model order.

推荐答案

我用jQuery用户界面可排序的，当一个项目被删除触发项目视图的事件做到了这一点。然后我就可以触发，包括模型作为集合视图绑定到数据的项目另外一个事件。然后集合视图可以负责更新排序顺序。

I've done this by using jQuery UI Sortable to trigger an event on the item view when an item is dropped. I can then trigger another event on the item view that includes the model as data which the collection view is bound to. The collection view can then be responsible for updating the sort order.

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

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

href=\"http://api.jqueryui.com/sortable/#event-stop\">停止事件的触发删除函数与项目的索引（由jQuery的用户界面提供）项目的DOM节点上的数据。

The stop event is bound to a function that triggers drop on the DOM node for the item with the item's index (provided by jQuery UI) as data.

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;
    }
});

drop事件势必会触发该项目视图的DOM的更新排序事件降功能与数据节点 [this.model，指数] 。这意味着我们传递了当前模型和它的指数（从jQuery UI的排序）给谁就给谁，势必对更新排序事件。

The drop event is bound to the drop function which triggers an update-sort event on the item view's DOM node with the data [this.model, index]. That means we are passing the current model and it's index (from jQuery UI sortable) to whomever is bound to the update-sort event.

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();
    }
}); 

的项目视图绑定到更新排序事件和函数使用由事件传递的数据（模型和索引）。该模型是从集合中删除，在序属性更新其余每个项目，通过ID项目的顺序被发送到服务器，存储状态。

The Items view is bound to the update-sort event and the function uses the data passed by the event (model and index). The model is removed from the collection, the ordinal attribute is updated on each remaining item and the order of items by id is sent to the server to store state.

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

集合定义了比较的功能，它通过序。这使得项目的呈现顺序同步默认秩序现藏由序的价值属性。

The collection has a comparator function defined which orders the collection by ordinal. This keeps the rendered order of items in sync as the "default order" of the collection is now by the value of the ordinal attribute.

请注意有努力一些重复：模型不需要被删除并重新添加到集合，如果一个集合具有作为的jsfiddle做了比较器功能。还认为可能不需要重新渲染本身。

Note there is some duplication of effort: the model doesn't need to be removed and added back to the collection if a collection has a comparator function as the jsfiddle does. Also the view may not need to re-render itself.

注意：相比其他的答案，我的感觉是，这是更正确的通知，它需要直接更新，而不是收集项目的模型实例。这两种方法都是有效的。这里的其他答案直接进入集合，而不是取模型的第一种方法。无论选择哪种更有意义给你。

Note: compared to the other answer, my feeling was that it was more correct to notify the model instance of the item that it needed to be updated instead of the collection directly. Both approaches are valid. The other answer here goes directly to the collection instead of taking the model-first approach. Pick whichever makes more sense to you.

这篇关于保存jQuery UI的可排序的以Backbone.js的集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！