[ОБНОВЛЕНИЕ: просмотрите реализацию этого ответа здесь]
Хорошо, я понял, как это сделать, но также понял, что у меня есть другая проблема, которая, вероятно, вызывала проблему и мешала правильной установке моих значений Session.set() (я создам отдельный вопрос SO для этого).
Я решил начать с нуля и просто сделать игрушечное приложение, в котором было только два выпадающих поля, чтобы я мог правильно настроить функциональность зависимостей.
Мой офис блокирует meteorpad, но я установил код ниже, так что я думаю, вы сможете вставить его и попробовать это из. Я добавил третье поле, и вы можете видеть, что как только выбрано первое поле (Отдел), оно обновляет доступные параметры во втором раскрывающемся списке (Изготовитель), а когда вы выбираете значение Изготовителя, оно обновляет 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'
})
}
});
}
11.12.2014
