Зависимое выпадающее меню в другой коллекции - PullRequest
Новая
       7

Зависимое выпадающее меню в другой коллекции

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

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

РЕДАКТИРОВАТЬ: я поместил оба шаблона в другой шаблон под названием новый порядок

HTML: 

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


var clientName= $('[name="newName"]').val();
    var mobNumber = $('[name="newMob"]').val();
    var age = $('[name="age"]').val();
    var radioValue= $('[name="gender"]').val();
    Customers.insert({
    clientName: clientName,
    age: age,
    radioValue:gender,
    createdAt: new Date()
    });

var addressName = $('[name="addressName"]').val();
    var detail = $('[name= details]').val();
    Addresses.insert({
      addressName: addressName,
      detail: detail,
      createdAt: new Date()
    });

Customers = new Mongo.Collection('customers');
Addresses = new Mongo.Collection('addresses');
Mobile = new Mongo.Collection('mobile');

1 Ответ

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

Поскольку вы используете два шаблона параллельно (а не в отношении «родитель-потомок»), вы можете использовать ReactiveVar для кэширования текущего выбранного имени клиента: 

const selectedCustomer = new ReactiveVar()

Обратите внимание, что он должен быть доступен для обоих шаблонов. Либо вы объявляете его обоими шаблонами в одном файле, либо используете import / export для предоставления доступа ко многим файлам.

Теперь вашим клиентам select необходимо назначить value каждому option, чтобы мы могли его кэшировать при изменении выбора: 

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

Я переименовал его в класс, чтобы избежать путаницы в именах, в select-customter. Заметили код {{#if selectedClient}}...? Мы будем использовать помощника для восстановления последнего выбранного состояния в раскрывающемся списке. В противном случае ваш выпадающий список будет сброшен при следующем цикле рендеринга: 

Template.selectClient.helpers({
  'custom': function(){
    return Customers.find();
  },
  selectedClient(name) {
    const selected = selectedCustomer.get()
    return selected && selected.clientName === name
  }
});

Мы получаем выбранного клиента из кэша и проверяем, совпадает ли значение текущей опции. Если true, мы можем пометить опцию как selected.

Теперь вам все еще нужно событие, которое охватывает выбранного клиента: 

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

Сохраняет выбранное значение (в настоящее время clientName) в формате запроса. Теперь в ваших адресах вам просто нужно запросить все Adresses документы с использованием выбранного кэшированного клиента: 

Template.selectAddress.helpers({
  'address': function(){
    const query = selectedCustomer.get() || {}
    return Addresses.find(query);
  }
});

Если клиент выбран, он будет отправлять запрос как сервер, в противном случае будут возвращены все адреса.

Хорошо, что этот ReactiveVar уже предоставляет вам возможность инициировать новый цикл рендеринга, если он обновляется, поскольку код ваших помощников полагается на него, и Blaze автоматически разрешает это для вас.

Modificatopns

В этом коде предполагается, что Adresses имеет отношение к Customers в поле с именем clientName. Если вы сохранили отношение с помощью других полей, таких как _id - clientId, вам необходимо соответствующим образом изменить код.

Вы также можете скрыть второй раскрывающийся список и отображать его, только если в selectedCustomer.

есть значение.
...