modo corretto di ordinare una collezione backbone.js al volo

Question

posso fare con successo questo:

App.SomeCollection = Backbone.Collection.extend({ 
    comparator: function(collection){ 
    return(collection.get('lastName')); 
    } 
}); 

che è bello se voglio avere una collezione che viene organizzato solo per 'lastName'. Ma ho bisogno di fare questo ordinamento fatto dinamicamente. A volte, ho bisogno di ordinare, per esempio, 'firstName' invece.

miei fallimenti pronunciano includono:

ho provato passando una variabile in più specificando la variabile a sort() su. Non ha funzionato. Ho anche provato sortBy(), che non ha funzionato neanche. Ho provato a passare la mia funzione per ordinare(), ma questo non ha funzionato neanche. Passando una funzione definita dall'utente a sortBy() solo per ottenere che il risultato non disponga di un metodo each, annullando il punto di avere una raccolta backbone appena ordinata.

Qualcuno può fornire un esempio pratico di ordinamento mediante una variabile che non è codificata in modo fisso nella funzione di confronto? O qualsiasi hack che hai funziona? In caso contrario, una chiamata sortBy() funzionante?

Answer 1

Interessante domanda. Vorrei provare una variante del modello di strategia qui. Si potrebbe creare un hash di funzioni di ordinamento, quindi impostare comparator basato sul membro selezionato del hash:

App.SomeCollection = Backbone.Collection.extend({ 
    comparator: strategies[selectedStrategy], 
    strategies: { 
     firstName: function() { /* first name sorting implementation here */ }, 
     lastName: function() { /* last name sorting implementation here */ }, 
    }, 
    selectedStrategy: "firstName" 
}); 

allora si potrebbe cambiare la vostra strategia di ordinamento al volo aggiornando il valore della proprietà selectedStrategy.

EDIT: mi sono reso conto dopo che sono andato a letto :) che questo non avrebbe funzionato come ho scritto sopra, perché stiamo passando un oggetto letterale a Collection.extend. La proprietà comparator verrà valutata una volta, quando l'oggetto verrà creato, quindi non cambierà al volo a meno che non sia obbligato a farlo. C'è probabilmente un modo più pulito per fare questo, ma questo dimostra il passaggio delle funzioni di confronto al volo:

var SomeCollection = Backbone.Collection.extend({ 
    comparator: function (property) { 
     return selectedStrategy.apply(myModel.get(property)); 
    }, 
    strategies: { 
     firstName: function (person) { return person.get("firstName"); }, 
     lastName: function (person) { return person.get("lastName"); }, 
    }, 
    changeSort: function (sortProperty) { 
     this.comparator = this.strategies[sortProperty]; 
    }, 
    initialize: function() { 
     this.changeSort("lastName"); 
     console.log(this.comparator); 
     this.changeSort("firstName"); 
     console.log(this.comparator);   
    }                       
}); 

var myCollection = new SomeCollection; 

Ecco un jsFiddle che illustra questo.

La radice di tutti i problemi, penso, è che le proprietà sui valori letterali degli oggetti JavaScript vengono valutate immediatamente quando viene creato l'oggetto, quindi è necessario sovrascrivere la proprietà se si desidera modificarla. Se provi a scrivere un qualche tipo di passaggio nella proprietà stessa, verrà impostato su un valore iniziale e resterà lì.

Ecco un buon blog post che discute questo in un contesto leggermente diverso.

Answer 2

Quindi, questa era la mia soluzione che funzionava davvero.

App.Collection = Backbone.Collection.extend({ 

    model:App.Model, 

    initialize: function(){ 
     this.sortVar = 'firstName'; 
    }, 

    comparator: function(collection){ 
     var that = this; 
     return(collection.get(that.sortVar)); 
    } 

    }); 

Poi nella vista, devo MICKEY MOUSE in questo modo:

this.collections.sortVar = 'lastVar' 

this.collections.sort(this.comparator).each(function(){ 
    // All the stuff I want to do with the sorted collection... 
}); 

Dal Josh Earl è stato l'unico a tentare ancora una soluzione e mi ha portato nella giusta direzione, Accetto la sua risposta. Grazie Josh :)

Answer 3

Passare alla funzione comparatore assegnando una nuova funzione e ordinando una chiamata.

// Following example above do in the view: 

// Assign new comparator 
this.collection.comparator = function(model) { 
    return model.get('lastname'); 
} 

// Resort collection 
this.collection.sort(); 

// Sort differently 
this.collection.comparator = function(model) { 
    return model.get('age'); 
} 
this.collection.sort(); 

Answer 4

Questa è una vecchia questione, ma di recente ho avuto un bisogno simile (in ordine una collezione sulla base di criteri che devono essere fornite da un clic evento utente) e ho pensato di condividere la mia soluzione per gli altri che affrontano questo problema. Non richiede model.get ("attributo") codificato.

ho praticamente usato Dave Newton approach di estendere gli array nativo JavaScript, e su misura a Backbone:

MyCollection = Backbone.Collection.extend({ 

    // Custom sorting function. 
    sortCollection : function(criteria) { 

     // Set your comparator function, pass the criteria. 
     this.comparator = this.criteriaComparator(criteria); 
     this.sort(); 
    }, 

    criteriaComparator : function(criteria, overloadParam) { 

     return function(a, b) { 
      var aSortVal = a.get(criteria); 
      var bSortVal = b.get(criteria); 

      // Whatever your sorting criteria. 
      if (aSortVal < bSortVal) { 
       return -1; 
      } 

      if (aSortVal > bSortVal) { 
       return 1; 
      } 

      else { 
       return 0; 
      } 

     }; 
    } 

}); 

Annotare il "overloadParam". Per lo documentation, Backbone utilizza "sortBy" di Underscore se la funzione di comparatore ha un parametro singolo e un ordinamento in stile JS nativo se ha due parametri. Abbiamo bisogno di quest'ultimo, da qui il "overloadParam".

Answer 5

Questo è quello che ho fatto per l'app su cui sto lavorando attualmente. Nella mia collezione ho:

comparator: function(model) { 
    var methodName = applicationStateModel.get("comparatorMethod"), 
     method = this[methodName]; 
    if (typeof(method === "function")) { 
     return method.call(null, model); 
    } 
} 

Ora posso aggiungere alcuni metodi diversi per la mia collezione: fooSort(), barSort(), e bazSort().
Voglio fooSort sia quella predefinita così mi sono messo che nel mio modello di stato in questo modo:

var ApplicationState = Backbone.Model.extend({ 
    defaults: {    
     comparatorMethod: "fooSort" 
    } 
}); 

Ora tutto quello che devo fare è scrivere una funzione a mio avviso, che aggiorna il valore di "comparatorMethod" seconda ciò che l'utente fa clic. Ho impostato la collezione per ascoltare le modifiche e fare sort(), e ho impostato la vista per ascoltare gli eventi sort e render().

BAZINGA !!!!

Answer 6

Guardando allo source code, sembra che ci sia un modo semplice per farlo, impostando il comparatore su stringa invece che funzione. Funziona, dato Backbone.Collection mycollection:

 mycollection.comparator = key; 
     mycollection.sort();