Question

我需要在我的meteor应用程序中实现2个依赖选择。我是web开发的新手，也是meteor的新手。但是我已经做了一些有效的工作，但我想知道这是否是正确的方法，或者是否还有其他更好的方法。为什么我想知道这是因为我在网上看到了一些我能够很好理解的代码，所以我更喜欢按照我认为的那样去做。

选择是汽车品牌的选择，第二选择与所选品牌的型号。

我正在使用meteor 1.3中的Session（尽管我已经阅读了一些可以使用的反应变量的内容）。

现在请不要考虑安全问题。

提前致谢。

这是我的代码：

const VEHICLE_MODELS = "vehicleModels";

function setVehicleModels(vehicleModels){
    Session.set(VEHICLE_MODELS, vehicleModels);    
}

function getVehicleModels(){
    return Session.get(VEHICLE_MODELS);    
}

Template.startJob.events({
    'change #carBrands': function(e){
        e.preventDefault();

        var selectedBrand = $("#carBrands").val();
        var vehicleData = Vehicles.findOne({"make":selectedBrand})
        setVehicleModels(vehicleData.models);        
    }
});

Template.startJob.helpers({
    carBrands(){
        return Vehicles.find();
    },
    carModels(){
        return getVehicleModels();        
    }    
});

<div class="form-group">
                        <label for="carBrands" class="col-sm-2 control-label">
                            Make
                        </label>
                        <div class="col-sm-10">
                            <select id="carBrands" class="form-control select2">
                                <option value="">Select a brand...</option>
                                {{#each carBrands}}
                                    <option value="{{make}}">{{make}}</option>
                                {{/each}}                                
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="carModels" class="col-sm-2 control-label">
                            Model
                        </label>
                        <div class="col-sm-10">
                            <select id="carModels" class="form-control select2">
                                <option value="">Select a model...</option>
                                {{#each carModels}}
                                    <option value="{{this}}">{{this}}</option>
                                {{/each}}                                
                            </select>
                        </div>
                    </div>

Answer 1

Meteor中的经典模式是使用由事件设置的Session变量，并驱动从属菜单的数据上下文。这样可以简化您的代码，因为只需要一个Session变量（或者一个反应变量）。

Template.startJob.events({
    'change #carBrands': function(e){
        e.preventDefault();

        var selectedBrand = $("#carBrands").val();
        var vehicleData = Vehicles.findOne({ make: selectedBrand })
        Session.set('brandId', selectedBrand._id);         
    }
});

Template.startJob.helpers({
    carBrands(){
        return Vehicles.find();
    },
    carModels(){
        return VehicleModels.find({ brandId: Session.get('brandId') });        
    }    
});

没有更改你的HTML。

流星依赖选择

1 个答案: