передать данные из 2 коллекций в выпадающее меню 2 - Метеор - PullRequest
Новая
       5

передать данные из 2 коллекций в выпадающее меню 2 - Метеор

0 голосов
/ 17 сентября 2018

Я новичок в Метеоре. У меня есть 2 выпадающих меню в каждом из нескольких collection. Первый: имя клиента в коллекции Customers.второе: адрес в адресах.Поэтому, когда я выбираю имя клиента в первом раскрывающемся списке, адрес этого клиента должен отображаться в следующем раскрывающемся списке.

ВНИМАНИЕ: я использую 2 других шаблона для вставки данных в оба раскрывающихся списка.Я не использовал библиотеку и использую железный маршрутизатор 

template name="newOrder">
  <div class="title">
    <h2>New Orders: </h2>
    <input type="button" class="new" value="&plus; New Customer">
  </div>
  <form class="newOrder">
    <p>{{> selectClient}}</p>
  <p>Mobile number:<br> <input type="tel" class="Mobile" placeholder="Enter your mobile number.."
    required></p>
  <p>Products:<textarea rows="3" cols="35"></textarea></p>
  <p>Address: {{> selectAddress}}</p>
  <p>Date:   <input type="date" name="date" ></p>
  <p>Status:
    <select>
      <option>Pending</option>
      <option>Preparing</option>
      <option> Delivering</option>
    </select></p>
  <input type="button" name="create" class="done" value="Done">
</form>
</template>

<template name="selectClient">
  Client Name :
<select class="select">
  <option selected disabled>Choose client name</option>
  {{#each custom}}
  <option>{{clientName}}</option>
  {{/each}}
</select>
</template>
<template name="selectAddress">
  Address:
<select class="select" name="Choose the address">
  <option selected disabled>Choose the address</option>
  {{#each address}}
  <option>{{addressName}}</option>
  {{/each}}
</select>
</template>

main.js 

Template.selectClient.helpers({
    'custom': function(){
        return Customers.find();
    }
  });
  Template.selectAddress.helpers({
    'address': function(){
        return Addresses.find();
    }
});

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

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

0 голосов
/ 22 февраля 2019

Я использовал ReactiveVar для решения проблемы 

    const clientAddress = new ReactiveVar()
      const clientOrder = new ReactiveVar()


    Template.selectAddress.helpers({
      'address' : function () {
        return Addresses.find({customerId: clientOrder.get()});
    }
    });
    Template.selectClient.events({
        'change .select-customer': function (event) {
        const addressValue = $(event.currentTarget).val();
        clientAddress.set({customerId: addressValue});
        }
    });

Template.selectClient.events({
  'change .select'(event, templateInstance) {
    // get the value using jQuery
    const value = templateInstance.$(event.currentTarget).val()
    // update the ReactiveVar
    selectedCustomer.set({ clientName: value })
  }
}); `

мой HTML 

<template name="selectClient">
Client Name :
<select class="select-customer" name="client1">
    <option selected disabled>Choose client name</option>
    {{#each custom}}
        <option value="{{_id}}">{{clientName}}</option>
    {{/each}}
</select>

0 голосов
/ 18 сентября 2018

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

Лично я бы старался избегать подписок настолько, насколько это возможно, поскольку каждая подписка, которую вы создаете, сервер должен отслеживать в памяти.В этом сценарии лучше всего использовать методы ReactiveVar и Meteor.

Когда изменяется первый раскрывающийся список, используйте «событие», чтобы выполнить вызов Meteor, который получает данные об адресе.Когда данные адреса передаются обратно из вызова Meteor, сохраните их в ReactiveVar, который возвращается к помощнику адресов.Затем он должен автоматически обновиться, не перегружая сервер.

Используя этот метод, вы также сможете использовать диалоговые окна загрузки, пока ожидает вызов Meteor.

...