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

时间:2014-12-09 19:28:44

标签: javascript html mongodb drop-down-menu meteor

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

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

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

  

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

1 个答案:

答案 0 :(得分: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'
      })
    }
  });
}