J'ai fait cela à l'aide de jQuery UI Sortable pour déclencher un événement sur le point de vue lorsqu'un élément est supprimé. J'ai peut alors déclencher un autre événement sur le point de vue qui inclut le modèle de données dont la collecte de vue est lié. La collecte de vue peut alors être responsable de la mise à jour de l'ordre de tri.
Exemple de travail
http://jsfiddle.net/7X4PX/4/
jQuery UI Sortable
$(document).ready(function() {
$('#collection-view').sortable({
// consider using update instead of stop
stop: function(event, ui) {
ui.item.trigger('drop', ui.item.index());
}
});
});
L' arrêt de l'événement est lié à une fonction qui déclenche drop sur le nœud DOM pour l'élément avec l'élément d'indice (fourni par jQuery UI) en tant que données.
Point de vue
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;
}
});
La baisse de l'événement est lié à l' drop fonction qui déclenche une update-sort événement sur le point de vue du nœud DOM avec les données de l' [this.model, index]. Cela signifie que nous sommes en train de le modèle actuel et de l'index (à partir de jQuery UI sortable) à quiconque est lié à l' update-sort événement.
Les éléments (collection) vue
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();
}
});
L' Items point de vue est lié à l' update-sort événement et la fonction utilise les données transmises par l'événement (modèle et l'index). Le modèle est supprimé de la collection, l' ordinal attribut est mis à jour sur chaque élément et l'ordre des éléments d'identification est envoyée au serveur pour stocker l'état.
Collection
Application.Collection.Items = Backbone.Collection.extend({
model: Application.Model.Item,
comparator: function(model) {
return model.get('ordinal');
},
});
La collection est un comparateur de fonction définie à l'commandes de la collection en ordinal. Cela permet de maintenir le rendu de l'ordre des éléments dans sync comme "par défaut" de la collection est maintenant par la valeur de l' ordinal d'attribut.
Remarque il existe un certain chevauchement des efforts: le modèle n'a pas besoin d'être retirés et ajoutés à la collection, si une collection est un comparateur de fonction que le jsfiddle n'. Aussi la vue peut-être pas besoin de re-rendre lui-même.
Remarque: par rapport à l'autre réponse, mon sentiment était qu'il était plus correct de le notifier à l'instance du modèle de l'élément qui doit être mis à jour à la place de la collection, directement. Les deux approches sont valables. L'autre réponse ici va directement à la collecte, au lieu de prendre le modèle de la première approche. Choisissez laquelle plus de sens pour vous.
