2016-10-11 30 views
0

Ich habe eine Sammlung von Modellen mit booleschem Wert interviewed und ich möchte sie so filtern, dass meine Ansicht entweder Modelle mit dieser Eigenschaft auf true oder Modelle mit dieser Eigenschaft auf false festgelegt anzeigen würde. In meiner Sammlung habe ich die folgenden Methoden:Filtern der Sammlung funktioniert nicht

var ResumeCollection = Backbone.Collection.extend({ 
    filterActive: function() { 
     var active = this.where({interviewed: false}); 
     return active; 
    }, 

    filterInterviewed: function() { 
     var interviewed = this.where({interviewed: true}); 
     return interviewed; 
    } 
}); 

und meiner Ansicht nach habe ich folgendes:

var ResumeList = Backbone.View.extend({ 
    events: { 
     'click #active': 'showActive', 
     'click #interviewed': 'showInterviewed' 
    }, 

    initialize: function() { 
     this.collection = new ResumeCollection(); 
    }, 

    render: function() { 
     var self = this; 
     this.$el.html($('#filter')); 
     _.each(this.collection.toArray(), function (cv) { 
      self.$el.append((new ResumeView({model: cv})).render().$el); 
     }); 
    }, 

    showActive: function() { 
     this.collection.filterActive(); 
     this.render(); 
    }, 

    showInterviewed: function() { 
     this.collection.filterInterviewed(); 
     this.render(); 
    } 
}); 

Aber jedes Mal, wenn ich #active oder #interviewed Schaltflächen klicken, es passiert nichts und die Modelle mit den erforderlichen Eigenschaften werden nicht gerendert. Ich habe bereits versucht, dies mit reset Methode zu verwalten oder eine neue Sammlung Instanz mit erforderlichen Modellen, aber das ist keine Lösung, denn wenn ich die erste Sammlung erfolgreich filtern, gibt es mir eine neue Sammlung mit den Modellen, die ich brauche (z. B. Modelle wo interviewed: true), und ich kann es nicht mehr filtern - es gibt nur eine leere Sammlung zurück. Ich kann einfach nicht bekommen, wie ich diese eine Sammlung so filtern kann, wie ich brauche.

+0

Sie müssen die Modelle in Sammlungen filtern und die gefilterten Modelle zurückgeben. In Ihrem Fall ist "interviewed" nur ein Sammelparameter. –

+0

Ich habe 'interviewed' Parameter als Standard in meinem Modell – AlexNikolaev94

Antwort

2

Sie eine erfolgreich gefilterte Auflistung zurückkehren, und dann nicht mit ihnen etwas zu tun.

showActive: function() { 
    this.collection.filterActive();//returns a value you're not using 
    this.render(); 
}, 

showInterviewed: function() { 
    this.collection.filterInterviewed();//returns a value you're not using 
    this.render(); 
} 

Ich empfehle das Hinzufügen eines optionalen Parameters zu Ihrer Rendermethode, die die gefilterte Auflistung darstellt. Wenn der Parameter definiert ist, verwenden Sie ihn. Wenn nicht, verwenden Sie die ungefilterte Sammlung.

Ausleihen von @ Simo's Code, um eine neue Sammlung zurückzugeben.

filterActive: function() { 
    var active = this.where({interviewed: false}); 
    return new ResumeCollection(active); 
}, 

filterInterviewed: function() { 
    var interviewed = this.where({interviewed: true}); 
    return new ResumeCollection(interviewed); 
}, 

render: function (filtered) { 
    var self = this; 
    var data = filtered ? filtered.toArray() : this.collection.toArray(); 
    this.$el.html($('#filter')); 
    _.each(data , function (cv) { 
     self.$el.append((new ResumeView({model: cv})).render().$el); 
    }); 
}, 

showActive: function() { 
    var filtered = this.collection.filterActive(); 
    this.render(filtered); 
}, 

showInterviewed: function() { 
    var filtered = this.collection.filterInterviewed(); 
    this.render(filtered); 
} 
+0

Danke! Es funktioniert fast perfekt und macht, was ich brauche, außer einem Fehler - wenn die Ansicht zum ersten Mal gerendert wird, gibt es mir einen Fehler zurück: filtered.toArray ist keine Funktion und gibt nichts aus. Aber wenn ich auf Buttons klicke, verhalten sich die Events genau so, wie ich es brauche und rendern die benötigten Modelle. Irgendwelche Vorschläge zu diesem Fehler? – AlexNikolaev94

+0

** HINZUGEFÜGT ** Ich suche jetzt im Debugger und es scheint, dass, wenn die Ansicht zum ersten Mal gerendert wird, 'Daten' zuerst ein leeres Array erhält und dann 'undefiniert' wird, was den Fehler – AlexNikolaev94

+1

Wann verursacht Die Ansicht rendert zum ersten Mal, gibt es irgendwelche Argumente? Wenn nicht, sollte der ternäre Operator standardmäßig auf 'this.collection.toArray()' setzen. Wenn Sie ein Argument übergeben, erwartet die Renderfunktion, dass es sich um eine Backbone-Sammlung handelt. –

0

Ihr Problem besteht darin, dass Sie die gefilterte Sammlung nicht zurückgeben.

Dies sollte funktionieren:

filterActive: function() { 
    var active = this.filter(function(item) { 
     return item.get('interviewed') === false; 
    }); 

    return new ResumeCollection(active); 
}, 

filterInterviewed: function() { 
    var interviewed = this.filter(function(item) { 
     return item.get('interviewed') === true; 
    }); 

    return new ResumeCollection(interviewed); 
}, 
+0

leider, das hat nicht funktioniert :(und hier bekomme ich als Ergebnis eine neue Sammlung - aber was, wenn ich jetzt für diejenigen mit anderen Parametern filtern müssen? Ich meine, wenn diese Funktionen erfolgreich sind, bekomme ich im Ergebnis eine Sammlung von Modellen, in denen "interview === false" steht.Aber dann kann ich nicht nach den Sammlungen filtern, bei denen interview === true ist, es sei denn, ich aktualisiere die Seite manuell. – AlexNikolaev94

+0

Ich verstehe es nicht: warum müssen Sie den Browser manuell aktualisieren, um die Sammlung zu erhalten 'Interview == wahr '? –

+0

denn immer, wenn ich eine erste Sammlung filtere, bekomme ich eine neue Sammlung mit Modellen, die nur entweder interviewed === true' oder 'interviewed === false' Parameter haben, was es unmöglich macht, sie erneut zu filtern. Ich meine zum Beispiel, ich filtere erfolgreich die anfängliche Sammlung und erhalte eine neue Sammlung von Modellen mit 'interviewed === false'. Wenn ich die Sammlung dann erneut filtern möchte und wenn ich sie filtere, erhalte ich nur eine leere Sammlung. – AlexNikolaev94

0

Ich würde vorschlagen, Sie zu ändern, um ein Argument zu akzeptieren, das Array von Modellen sein wird.

Nun, wenn vollständige Sammlung Rendering können Sie anrufen machen als

render(this.collection.models) // reference to list of models 

auch, wenn Sie die Sammlung herausfiltern, dann die Filterfunktion höchstwahrscheinlich die Teilmenge von Modellen aus der Sammlung zurückkehren. Welche können Sie wieder passieren Funktion zu machen

this.render(this.showActive()) // showActive returns subset of models from collection 

Auf diese Weise machen Sie Ihre Funktion modular wird .. das Array akzeptiert und machen dann auf Seite ..

Jetzt zum Ausfiltern Sammlung können Sie verwenden Filter, in dem Verfahren durch Unterstreichung dargestellt. Denken Sie daran, die Rückkehr zu erfassen und übergeben Sie es zum Rendern Funktion ..

Verwandte Themen