Meteor React Gruppensammlung

Question

Ich habe eine Sammlung namens Items mit Feldern name und category. In /imports/api/Items.js die simpl-Schema ist definiert als:

const LibItems = new Mongo.Collection('libitems'); 
LibItems.schema = new SimpleSchema({ 
    category: String, 
    text: String, 
}); 
LibItems.attachSchema(LibItems.schema); 
if (Meteor.isServer) { 
    Meteor.publish('allLibItems', function() { 
    return LibItems.find({},); 
    }); 
} 
export default LibItems; 

auf der Seite, ich die Einzelteile pro einzigartige Kategorie gruppiert werden sollen; und zeigen nur die Elemente einer ausgewählten Kategorie (durch Klicken auf die Kategorie). So auf dem Boden der imports/client/libview.js die Elemente importiert und einzigartige Kategorien werden zurückgegeben:

export default createContainer(() => { 
    Meteor.subscribe('allLibItems'); 
    var libitems = LibItems.find({}, {sort: {category: 1}}).fetch(); 
    return { 
    libitems: libitems, 
    categories: _.uniq(
     libitems, false, 
     function(libitems) {return libitems.category} 
    ), 
    } 
}, LibView); 

Im render() Code wird renderCategory() die Kategorien zur Liste genannt:

renderCategories() { 
    return this.props.categories.map((category) => { 
    return (
     <li key={category._id} onClick={this.selectCategory.bind(null, category)}>{category.category}</li> 
    ); 
    }); 
} 

Wie die Einzelteile erhalten einer ausgewählten Kategorie? Ich bin relativ neu zu ReactJS und Meteor; und es könnte eine elegantere Möglichkeit geben, Elemente nach eindeutigen Kategorien zu gruppieren.

Answer 1

Vorausgesetzt, dass selectedCategory Variable verwendet wird, um die ausgewählte Kategorie zu speichern, dann könnten Sie mit find nur Elemente der ausgewählten Kategorie abrufen.

export default createContainer(() => { 
    Meteor.subscribe('allLibItems'); 
    var libitems = LibItems.find({ 
    category: selectedCategory, 
    }).fetch(); 

    return { 
    libitems: libitems, 
    categories: // ..., 
    } 
}, LibView); 

aktualisieren

Es gibt viele Möglichkeiten, in selectedCategory die ausgewählte Kategorie zu speichern, müssen Sie nur sicherstellen, dass selectedCategory reaktiv ist. Hier verwende ich ReactiveVar das erreichen:

const selectedCategory = new ReactiveVar(); 

function setSelectedCategory(newVal) { 
    selectedCategory.set(newVal); 
} 

export default createContainer(() => { 
    Meteor.subscribe('allLibItems'); 
    const libitems = LibItems.find({ 
    category: selectedCategory.get(), 
    }).fetch(); 

    return { 
    // pass setSelectedCategory down to LibView 
    setSelectedCategory: setSelectedCategory, 
    libitems: libitems, 
    categories: // ..., 
    } 
}, LibView); 

Dann innen LibView Komponente:

selectCategory(category) { 
    this.props.setSelectedCategory(category); 
    // ... 
}