MongoDB
 sql >> база данни >  >> NoSQL >> MongoDB

Meteor динамично филтрира падащото меню, когато е избрано друго падащо меню

[АКТУАЛИЗАЦИЯ: вижте изпълнението на този отговор тук ]

Добре, разбрах как да направя това, но също така разбрах, че имам друг проблем, който вероятно причиняваше проблема и предотвратяваше моя Session.set() стойностите да не са зададени правилно (ще създам отделен SO въпрос за този).

Реших да започна от нулата и просто да направя приложение за играчки, което има само двете падащи полета, за да мога да настроя правилно функционалността на зависимостта.

Моят офис блокира meteorpad , но зададох кода по-долу, така че мисля, че ще можете да го поставите и да го изпробвате. Добавих трето поле и можете да видите, че след като първото (отдел) поле е избрано, то актуализира наличните опции във второто падащо меню (Mfg.) и когато изберете стойност на Mfg., то актуализира 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'
      })
    }
  });
}



  1. Redis
  2.   
  3. MongoDB
  4.   
  5. Memcached
  6.   
  7. HBase
  8.   
  9. CouchDB
  1. Как да се справя с произволен хеш, върнат от mongo в go (с помощта на mgo)?

  2. MongoDB:Как да използвате една схема като поддокумент за различни колекции, дефинирани в различни файлове

  3. Източникът на синхронизиране нямаше грешка във версията за съвместимост на функцията при добавяне на член на MongoDB 3.6 към набор от реплики 3.4

  4. Spring Data MongoDB как да зададете време на изтичане програмно

  5. MongoDB агрегиране в диапазон