将数据从2个集合传递到2个下拉菜单 - Meteor

Question

我是Meteor的新手。我在几个集合中有两个下拉菜单。第一个：Customers集合中的客户名称。第二：地址中的地址。因此，当我在第一个下拉列表中选择客户端名称时，此客户端的地址应显示在下一个下拉列表中。

注意：我使用另外两个模板在两个下拉列表中插入数据。我没有使用任何库，我使用铁路由器

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

Answer 1

您需要在客户端下拉列表上处理更改事件，在处理程序中找到Addresses集合中的地址，并使用jQuery在地址中选择地址。

Answer 2

您可以传递一个响应变量的订阅，该变量将传递给您将传递给Mongo查询的发布。每次更新活动var时，它都会更新订阅。

就个人而言，我会尽可能地避免订阅，因为您创建的每个订阅，服务器都必须在内存中跟踪它。在这种情况下，最好的办法是使用ReactiveVar和Meteor方法。

当第一个下拉列表更改时，使用“事件”执行获取地址数据的Meteor调用。当地址数据从Meteor调用传回时，将其保存到返回地址助手的ReactiveVar中。然后应该自动更新，而不是让服务器陷入困境。

使用此方法，您还可以在Meteor呼叫等待时使用加载对话框。

Answer 3

我使用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>