Коллекция группы метеорных реактивов

Question

У меня есть коллекция под названием Items с полями name и category. В /imports/api/Items.jsСимпл-схема определяется как:

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; 

На странице, я хочу, чтобы сгруппировать элементы в уникальной категории; и покажите только элементы выбранной категории (нажав на категорию). Так что на дне imports/client/libview.js элементы импортируются и уникальные категории возвращаются:

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); 

В render() коде renderCategory() называется перечислить категории:

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

Как получить товары выбранной категории? Я относительно новичок в ReactJS и Meteor; и может быть более элегантный способ группировки элементов по уникальным категориям.

Answer 1

Учитывая, что переменная selectedCategory используется для хранения выбранной вами категории, вы можете получить ее с помощью find, чтобы получить только предметы выбранной категории.

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

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

Update

Есть много способов, чтобы сохранить выбранную категорию в selectedCategory, вам просто нужно, чтобы убедиться, что selectedCategory реактивная. Здесь я использую ReactiveVar для достижения этой цели:

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); 

Затем внутри LibView компонента:

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