[ CẬP NHẬT: xem việc triển khai câu trả lời này tại đây ]
OK, đã tìm ra cách thực hiện việc này, nhưng tôi cũng nhận ra rằng tôi có một vấn đề khác có thể gây ra sự cố và ngăn Session.set() của tôi giá trị được đặt chính xác (Tôi sẽ tạo một câu hỏi SO riêng cho câu hỏi đó).
Tôi quyết định bắt đầu lại từ đầu và chỉ tạo một ứng dụng đồ chơi chỉ có hai trường thả xuống để tôi có thể sử dụng đúng chức năng phụ thuộc.
Văn phòng của tôi chặn meteorpad , nhưng tôi đã thiết lập mã bên dưới nên tôi nghĩ bạn có thể dán mã vào và dùng thử. Tôi đã thêm trường thứ ba và bạn có thể thấy rằng sau khi trường (Phòng) đầu tiên được chọn, trường đó sẽ cập nhật các tùy chọn có sẵn trong menu thả xuống thứ 2 (Mfg.) Và khi bạn chọn giá trị Mfg, nó sẽ cập nhật trường thứ 3 (Nhà cung cấp ).
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'
})
}
});
}
