不同集合中的依赖下拉菜单

Question

我是Meteor的新手。我试图让下拉菜单依赖于其他下拉列表。第一个用于Customers集合中的客户端名称，第二个用于Addresses集合中的客户端地址。我有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');

Answer 1

由于您并行使用两个模板（而不是父子关系），因此可以使用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中有值，您也可以隐藏第二个下拉列表并仅显示它。