Question

由于流星的运作方式，我不确定这是否可行。我试图找出如何取消订阅和订阅集合，并在用户单击按钮时从客户端的mini mongo中删除数据。我在下面的示例中遇到的问题是，当用户点击handleButtonAllCompanies时，所有数据都会传递到客户端，然后如果他们点击handleButtonTop100则不会重新订阅。因此客户端的数据不会改变。有可能这样做吗？

路径：CompaniesPage.jsx

export default class CompaniesPage extends Component {
  constructor(props) {
    super(props);

    this.handleButtonAllCompanies = this.handleButtonAllCompanies.bind(this);
    this.handleButtonTop100 = this.handleButtonTop100.bind(this);
  }

  handleButtonAllCompanies(event) {
    event.preventDefault();

    Meteor.subscribe('companiesAll');
  }

  handleButtonTop100(event) {
    event.preventDefault();

    Meteor.subscribe('companiesTop100');
  }

  render() {
    // console.log(1, this.props.companiesASX);
    return (
      <div>
        <Button color="primary" onClick={this.handleButtonAllCompanies}>All</Button>
        <Button color="primary" onClick={this.handleButtonTop100}>Top 100</Button>
      </div>
    );
  }
}

路径：Publish.js

Meteor.publish('admin.handleButtonAllCompanies', function() {
  return CompaniesASX.find({});
});

Meteor.publish('admin.handleButtonTop100', function() {
  return CompaniesASX.find({}, { limit: 100});
});

Answer 1

这绝对是可能的，但这样做的方法是修复您的出版物。你想要思考MVC，即尽可能地将数据和模式与你呈现它的方式分开。这意味着您不应为两个特定目的维护同一集合的两个出版物。相反，您希望重用相同的出版物，但只需根据需要更改参数。

Meteor.publish('companies', function(limit) {
  if (limit) {
    return CompaniesASX.find({}, { limit });
  } else { 
    return CompaniesASX.find({});
  }
});

然后您可以将按钮处理程序定义为：

  handleButtonAllCompanies(event) {
    event.preventDefault();
    Meteor.subscribe('companies');
  }

  handleButtonTop100(event) {
    event.preventDefault();
    Meteor.subscribe('companies', 100);
  }

这样您就可以更改现有订阅，而不是创建新订阅。

我还不熟悉流星的反应。但是在大火中你甚至不需要重新订阅。您只需提供一个反应变量作为订阅参数，只要改变，meteor就会反应更新订阅。反应可能也是如此，但我不确定如何。

Answer 2

好的，首先感谢@Christian Fritz，他的建议让我走上正轨。我希望这有助于其他人。

我没有意识到订阅应该在Container组件中控制，而不是在页面组件中。使用Session.set和Session.get，我可以更新更新订阅的Container组件。

这是有效的（如果有更好或更多的流星方式，请发布），我希望如果他们遇到类似的问题，这将有助于其他人。

路径CompaniesContainer.js

export default UploadCSVFileContainer = withTracker(({ match }) => {
  const limit = Session.get('limit');

  const companiesHandle = Meteor.subscribe('companies', limit);
  const companiesLoading = !companiesHandle.ready();
  const companies = Companies.find().fetch();
  const companiesExists = !companiesLoading && !!companies;

  return {
    companiesLoading,
    companies,
    companiesExists,
    showCompanies: companiesExists ? Companies.find().fetch() : []
  };
})(UploadCSVFilePage);

路径：CompaniesPage.jsx

export default class CompaniesPage extends Component {
  constructor(props) {
    super(props);

    this.handleButtonAllCompanies = this.handleButtonAllCompanies.bind(this);
    this.handleButtonTop100 = this.handleButtonTop100.bind(this);
  }

  handleButtonAllCompanies(event) {
    event.preventDefault();
    // mongodb limit value of 0 is equivalent to setting no limit
    Session.set('limit', 0)
  }

  handleButtonTop100(event) {
    event.preventDefault();
    Session.set('limit', 100)
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.handleButtonAllCompanies}>All</Button>
        <Button color="primary" onClick={this.handleButtonTop100}>Top 100</Button>
      </div>
    );
  }
}

路径：Publish.js

Meteor.publish('companies', function() {
  if (limit || limit === 0) {
    return Companies.find({}, { limit: limit });
  }
});

Answer 3

Path CompaniesContainer.js

export default CompaniesContainer = withTracker(() => {
  let companiesHandle;  // or fire subscribe here if you want the data to be loaded initially
  const getCompanies = (limit) => {
    companiesHandle = Meteor.subscribe('companies', limit);
  }

  return {
    getCompanies,
    companiesLoading: !companiesHandle.ready(),
    companies: Companies.find().fetch(),
  };
})(CompaniesPage);

路径：CompaniesPage.jsx

export default class CompaniesPage extends Component {
  constructor(props) {
    super(props);
    this.handleButtonAllCompanies = this.handleButtonAllCompanies.bind(this);
    this.handleButtonTop100 = this.handleButtonTop100.bind(this);
  }

  getCompanies(limit) {
    this.props.getCompanies(limit);
  }

  handleButtonAllCompanies(event) {
    event.preventDefault();
    // mongodb limit value of 0 is equivalent to setting no limit
    this.getCompanies(0);
  }

  handleButtonTop100(event) {
    event.preventDefault();
    this.getCompanies(100);
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.handleButtonAllCompanies}>All</Button>
        <Button color="primary" onClick={this.handleButtonTop100}>Top 100</Button>
      </div>
    );
  }
}

路径：Publish.js

Meteor.publish('companies', function(limit) {
  if (!limit) { limit = 0; }
  return Companies.find({}, { limit: limit });
});

让流星取消订阅数据

3 个答案: