Как я могу изменить параметры запроса подписки в react-komposer (meteor) из дочернего компонента?

Я создаю приложение с Meteor, используя пакет react-komposer. Это очень просто: есть компонент верхнего уровня (App), содержащий форму поиска и список результатов. Список получает свои записи через реквизиты, предоставляемые контейнером komposer (AppContainer). Он работает отлично, пока я не попытаюсь реализовать поиск, чтобы сузить результаты, отображаемые в списке.

Это код, с которого я начал (AppContainer.jsx):

import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import React, { Component } from 'react';
import Entries from '../api/entries.js';
import App from '../ui/App.jsx';

function composer(props, onData) {
  if (Meteor.subscribe('entries').ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

export default composeWithTracker(composer)(App);

Приложение просто отображает весь список записей. Чего я хотел бы добиться, так это передать параметры запроса в Entries.find({}).fetch(); с данными, поступающими из компонента App (захваченными, например, с помощью ввода текста). Другими словами: как передать параметр в AppContainer из компонента App (дочерний) для поиска определенных записей и, в конечном итоге, повторного рендеринга соответствующих результатов. ?

Чтобы уточнить, вот код для App.jsx:

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <form>
          <input type="text" placeholder="Search" />
        </form>
        <ul>
          {this.props.entries.map((entry) => (
            <li key={entry._id}>{entry.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Заранее спасибо!


npm meteor composition meteor-react datafeed
person Wolfgang Becker    schedule 15.05.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Есть 2 подхода, которые вы можете предпринять.

  1. Способ подписки,
  2. Путь Meteor.call,

Способ подписки

Это включает в себя установку свойства, которое вы извлекаете из URL-адреса. Таким образом, вы настраиваете свои маршруты для отправки свойства query в ваш компонент. Ваш компонент использует это свойство в качестве параметра для отправки в вашу публикацию и подписывается только на материалы, соответствующие критериям поиска. Затем вы помещаете свой запрос в оператор выборки и отображаете результат.

Путь Meteor.call

Забудьте о подписке и сделайте это по-старому. Отправьте запрос в конечную точку, в данном случае метод Meteor, и отобразите результаты. Я предпочитаю этот метод по одной причине, $text. Minimongo не поддерживает $text, поэтому вы не можете использовать $text для поиска данных на клиенте. Вместо этого вы можете настроить монго вашего сервера с текстовыми индексами и методом метеора для обработки поиска и отображения результатов.

Посмотрите, что соответствует вашим приоритетам. Способ meteor.call требует от вас немного больше работы, чтобы сделать «Результаты поиска» доступными через URL-адрес, но вы получите более богатые результаты поиска. Способ подписки проще в реализации.

Вот ссылка на руководство по поиску метеора и прочитайте $text, если вам интересно

person nupac    schedule 17.05.2016
comment
Спасибо за Ваш ответ. Это дает мне приблизительное представление о том, как действовать дальше, но я не смог воплотить эти подходы в реальный код. Не могли бы вы привести пример на основе фрагментов кода? - person Wolfgang Becker; 20.05.2016
comment
@WolfgangBecker есть новости по этому поводу? у меня та же проблема, в основном я просто хочу отфильтровать список в своем компоненте. У вас есть пример кода? - person reggieboyYEAH; 07.07.2016
comment
@reggieboyYEAH Я только что представил альтернативный ответ, основанный на одном из решений, предложенных nupac. - person Wolfgang Becker; 13.07.2016

arrow_upward
2
arrow_downward

Я собирался написать комментарий, чтобы прояснить ответ nupac, но количество символов было слишком ограниченным.

Образец кода, который вы ищете, находится в ссылке на руководство по поиску, предоставленной nupac. Вот функция композитора с соответствующими изменениями:

function composer(props, onData) {
  if (Meteor.subscribe('entries', Session.get("searchValues")).ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

Решением является пакет session. Возможно, вам потребуется добавить его в файл пакетов, и он должен быть доступен без необходимости его импорта. В противном случае попробуйте с import { Session } from 'meteor/session'; Вам просто нужно установить сеанс при отправке формы поиска. Например, вот так:

Session.set("searchValues", {
      key: value
});

Подписка будет автоматически извлекать данные каждый раз, когда изменяется конкретное значение сеанса.

Наконец, вы сможете получить доступ к значениям в методе публикации на стороне сервера:

Meteor.publish('entries', (query) => {
  if (query) {
    return Entries.find(query);
  } else {
    return Entries.find();
  }
});

Надеюсь это поможет. Если это не так, просто дайте мне знать.

person Wolfgang Becker    schedule 13.07.2016