MongoDB
 sql >> Database >  >> NoSQL >> MongoDB

Meteor filtra dinamicamente il menu a discesa quando viene selezionato un altro menu a discesa

[AGGIORNAMENTO: guarda l'implementazione di questa risposta qui ]

OK, ho capito come farlo, ma mi sono anche reso conto che ho un altro problema che probabilmente stava causando il problema e impedendo il mio Session.set() valori dall'impostazione corretta (creerò una domanda SO separata per quella).

Ho deciso di iniziare da zero e creare un'app giocattolo che avesse solo i due campi a discesa in modo da poter ottenere la funzionalità di dipendenza corretta.

Il mio ufficio blocca meteorpad , ma ho impostato il codice di seguito, quindi penso che potresti incollarlo e provarlo. Ho aggiunto un terzo campo e puoi vedere che una volta selezionato il primo campo (Dipartimento), aggiorna le opzioni disponibili nel 2° menu a tendina (Mfg.) e quando selezioni un valore Mfg., aggiorna il 3° (Vendor ).

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