Question

我是Meteor的新手。我有2个下拉菜单，每个都有几个集合。第一个：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();
    }
});

Answer 1

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

Answer 2

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

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

当第一个下拉列表更改时，请使用“事件”进行流星调用以获取地址数据。当地址数据从Meteor调用传回时，请将其保存到返回到地址帮助器的ReactiveVar中。然后，它应该会自动更新，而不会阻塞服务器。

使用此方法，您还可以在流星呼叫等待期间使用加载对话框。

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个下拉菜单-流星

3 个答案: