2013-08-17 9 views
7

Domande collegati -Best Practice per lo spostamento del modello dorsale all'interno di una collezione

BackboneJS best way to rearrange models in a collection while maintaining 0-indexed ordinal property for each model

How can I move a model within a collection?

Ho una collezione Backbone, rappresentato visivamente in un elenco. Questa lista è trascinabile/trascinabile. Qualsiasi oggetto può essere spostato in una posizione arbitraria nella collezione (cioè - non un ordinamento). Ho visto alcuni esempi che utilizzano la rimozione/aggiunta nativa della raccolta per mettere il modello nel posto giusto. Tuttavia, le chiamate interne Backbone vengono impostate quando vengono aggiunti i modelli, che quindi chiama un gruppo di metodi relativi agli eventi e li ordina alla fine. C'è qualche svantaggio solo per giuntare il modello nella posizione corretta?

Rimuovi/Aggiungi: Vedere gli esempi nella prima domanda collegata.

Splice: Secondo esempio

Funzione Attualmente sto usando:

moveTo: function(oldIndex, newIndex){ 
     oldIndex = oldIndex instanceof Backbone.Model ? this.at(oldIndex) : oldIndex; 
     var spliced = this.models.splice(oldIndex, 1); 
     this.models.splice(newIndex, 0, spliced[0]); 
     this.trigger("move",[oldIndex,newIndex]); 
    }, 
+3

Sei sicuro che questo non è un tipo? Drag'n'drop per spostare le cose sta cambiando manualmente gli indici degli elementi e una matrice/collezione è qualcosa che è, più o meno, ordinato per indice. –

+0

Immagino che "tecnicamente" si possa chiamare una specie, intendevo solo che si tratta di un arbitrario, non di uno automatico basato sulle proprietà dell'array. Ma penso che tu stia precisando che questo è equivalente a un "ordinamento", dal momento che entrambi si limitano a riorganizzare gli elementi, e quindi Backbone non ha problemi con esso. – iabw

+0

La mia domanda potrebbe essere espressa meglio: "C'è mai una situazione in cui si desidera rimuovere e riaggiungere i modelli a una raccolta, invece di" ordinarli manualmente "? ;) – iabw

risposta

11

Ho scritto questa soluzione per il mio progetto più recente. Sembra un'interfaccia simile a ciò che hai descritto, una lista ordinabile. Questo metodo è associato alla raccolta.

reorder: function(new_index, original_index) { 
    // If nothing is being changed, don't bother 
    if (new_index === original_index) return this; 
    // Get the model being moved 
    var temp = collection.at(original_index); 
    // Remove it 
    collection.remove(temp); 
    // Add it back in at the new index 
    collection.add(temp, { at: new_index }); 
    return this; 
} 

Gran parte del mio codice è stato rimosso, ma questa è la funzionalità principale. L'opzione at di Backbone rende tutto questo davvero facile.

+2

È possibile disattivare le chiamate 'remove' e' add' per impedire modifiche indesiderate alle viste che ascoltano la raccolta e i modelli al suo interno. Potresti anche voler creare il tuo evento 'move' per consentire agli ascoltatori di reagire di conseguenza. –