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

Question

我是 Meteor 的新手..我有 2 个下拉菜单，每个下拉菜单有几个 collection.first 一个：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

您可以在反应变量中传递订阅，该变量传递给发布，然后您将其传递到 Mongo 查询中。每次更新反应变量时，它都会更新订阅。

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

当第一个下拉列表发生变化时，使用 "event" 进行 Meteor 调用以获取地址数据。当地址数据从 Meteor 调用传回时，将其保存到返回地址助手的 ReactiveVar 中。然后应该会自动更新，而不会导致服务器停滞不前。

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

Answer 2

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

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>

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

pass data from 2 collections to 2 dropdown menu - Meteor

html

javascript

meteor