Question

我有一个名为Items的集合，其字段为name和category。在/imports/api/Items.js中， simpl-schema 定义为：

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

<强>更新

有很多方法可以在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);
  // ...
}

Meteor React集团收藏

1 个答案: