2016-05-23 93 views
0

我需要在我的流星应用中实现2个依赖选择。我是一般的网络开发新手,流星很新。不过,我已经做了一些有效的工作,但我想知道这是否是正确的方式,或者是否有其他更好的方法来做到这一点。为什么我想知道这是因为我看到了一些我可以很好理解的代码,所以我宁愿按照我认为的那样去做。流星依赖选择

该选择是一个与汽车品牌和第二个与所选品牌的型号。

我在流星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> 
+0

你把这个表单放在模板(startJob)中吗? –

+0

@AnkushRishi是的,我做到了。我只是不想放置表单的整个代码。 '

' – Neo

回答

0

在流星经典模式这是使用由一个事件集和驱动从属菜单的数据上下文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。

+0

嗨。如果你看到我的代码,我只有一个集合!是的,我正在使用Session。谢谢。它看起来像我做的是好的! – Neo