Question

[更新：我回答了我自己的问题并意识到我遇到的问题与Session.get()值的一些奇怪格式有关，我之前发布的代码应该有或多或少的工作。

尽管如此，我想其他人可能想要完成同样的任务，所以我在meteor.com上发布了一个玩具示例here，这样人们就能看到我想要做的事情（并希望帮助其他人寻找相同的解决方案）。当我下班回家时，我会尝试记住将代码放在meteorpad上（我的办公室阻止它）。

以下是后人的原始问题/解释：

我想要做的是让每个下拉选项触发一个mongo 在后续下拉列表中查询过滤其可用选项基于前一个下拉列表设置的参数。

Answer 1

[更新：查看此答案的实施here]

好的，弄清楚如何做到这一点，但也意识到我有另一个可能导致问题的问题，并阻止我的Session.set()值被正确设置（我将创建一个单独的SO问题那个）。

我决定从头开始制作一个只有两个下拉字段的玩具应用程序，这样我就能获得正确的依赖功能。

我的办公室阻止了meteorpad，但我在下方设置了代码，因此我认为您可以将其粘贴并试用。我添加了第三个字段，您可以看到，一旦选择了第一个（部门）字段，它就会更新第二个下拉列表中的可用选项（制造商），当您选择制造商值时，它会更新第三个（供应商））。

<强> main.html中

<head>
  <title>Dropdown Test</title>
</head>

<body>

  {{> dropdowns}}

</body>

<!-- Begin Templates  -->
<template name="dropdowns">
  <field class="dept-name">Dept:
    {{> departments}}
  </field>
  <field class="mfg-number">Mfg:
    {{> manufacturers}}
  </field>
  <field class="vendor-name">Vendor:
    {{> vendors}}
  </field>
</template>

<!-- Department dropdown -->
<template name="departments">
  <select autocomplete="off" name="departmentNums" class="form-control department-selection">
    {{# each departmentNums}}
    {{> departmentNum}}
    {{/each}}
  </select>
</template>

<template name="departmentNum">
  <option>{{dept}}</option>
</template>

<!-- Manufacturer dropdown -->
<template name="manufacturers">
  <select autocomplete="off" name="manufacturerNums" class="form-control manufacturer-selection">
    {{# each manufacturers}}
    {{> manufacturerNum}}
    {{/each}}
  </select>
</template>

<template name="manufacturerNum">
  <option>{{mfg}}</option>
</template>

<!-- Vendor dropdown -->
<template name="vendors">
  <select autocomplete="off" name="vendorNames" class="form-control vendor-selection">
    {{# each vendorNames}}
    {{> vendorName}}
    {{/each}}
  </select>
</template>

<template name="vendorName">
  <option>{{name}}</option>
</template>

<强> main.js

Vendors = new Mongo.Collection('vendors');

if (Meteor.isClient) {
  /****************************** Subscriptions ********************************/
  Meteor.subscribe('vendors');


  /****************************** Department templates js ***********************/
  Template.departments.helpers({
    departmentNums: function() {
      // Get all the departments and sort them ascending
      var everything = Vendors.find({}, {sort: {dept:1}}).fetch();
      // De-dupe list of departments
      var justDepartments = _.pluck(everything,"dept");
      return _.uniq(justDepartments);
    }
  });

  Template.departments.events({
    "change .department-selection": function(e, t){
      return Session.set("department", $("[name=departmentNums]").val());
    }
  });

  /****************************** Manufacturer templates js *********************/
  Template.manufacturers.helpers({
    manufacturers: function() {
      // Find only manufacturers that have the same dept as the session and sort them ascending
      var everything = Vendors.find({dept: Session.get('department')}, {sort: {mfg:1}}).fetch();
      // De-dupe list of manufactuerers
      var justManufacturers = _.pluck(everything, "mfg");
      return _.uniq(justManufacturers);
    }
  });

  Template.manufacturers.events({
    "change .manufacturer-selection": function(e, t){
      return Session.set("manufacturer", $("[name=manufacturerNums]").val());
    }
  })

  /****************************** Vendor templates js *************************/
  Template.vendors.helpers({
    vendorNames: function(){
      // Filter on vendors that have the same dept and mfg as in previous dropdowns
      return Vendors.find(
        {dept: Session.get('department'),
         mfg: Session.get('manufacturer')}
        );
    },

    getVendorName: function() {
      Session.set("vendor", $("[name=vendorNames]").val());
    }
  });

  Template.vendors.events({
    "change .vendor-selection": function(e, t){
      return Session.set("vendor", $("[name=vendorNames]").val())
    }
  });
}

// Populate Vendors collection if empty
if (Meteor.isServer) {
  Meteor.startup(function() {
    // Make sure the Vendors collection has data
    if (Vendors.find().count() === 0) {
      Vendors.insert({
        name: 'CHANEL',
        dept: '143',
        mfg: '23'
      });

      Vendors.insert({
        name: 'GUCCI',
        dept: '234',
        mfg: '36'
      });

      Vendors.insert({
        name: 'COACH',
        dept: '636',
        mfg: '99'
      });

      Vendors.insert({
        name: 'ROBERTO-COIN',
        dept: '989',
        mfg: '1'
      });

      Vendors.insert({
        name: 'TOP SHOP',
        dept: '143',
        mfg: '86'
      });

      Vendors.insert({
        name: 'KIMs SHIRTS',
        dept: '234',
        mfg: '86'
      })
    }
  });
}

当选择另一个下拉列表时，Meteor会动态过滤下拉列表

1 个答案: