sql >> データベース >  >> NoSQL >> MongoDB

Meteorは、別のドロップダウンが選択されたときにドロップダウンを動的にフィルタリングします

    [更新: この回答の実装を見るこちら ]

    OK、これを行う方法を理解しましたが、問題を引き起こしている可能性があり、Session.set()を妨げている別の問題があることにも気づきました 値が正しく設定されていない(そのために別のSO質問を作成します)。

    ゼロから始めて、依存関係の機能を正しく取得できるように、2つのドロップダウンフィールドを持つおもちゃのアプリを作成することにしました。

    私のオフィスはmeteorpad をブロックしています 、しかし、私は以下のコードを設定したので、それを貼り付けて試してみることができると思います。 3番目のフィールドを追加しました。最初の(部門)フィールドを選択すると、2番目のドロップダウン(製造)で使用可能なオプションが更新され、製造値を選択すると、3番目の(ベンダー)が更新されます。 )。

    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. mongodbコレクションのすべてのフィールド名を取得しますか?

    2. MongoDB:配列フィールドのすべてのサブドキュメントからフィールドを削除する

    3. node.jsの10進数/マングースの浮動小数点

    4. MongoDb接続が拒否されました