[अपडेट करें: इस उत्तर के कार्यान्वयन को देखें यहां ]
ठीक है, यह पता लगा कि यह कैसे करना है, लेकिन यह भी महसूस किया कि मुझे एक और समस्या है जो संभवतः समस्या का कारण बन रही थी, और मेरे 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'
})
}
});
}
