流星依存選択

Question

私は流星群のアプリで2つの依存する選択肢を実装する必要があります。私は一般的なWeb開発では新しく、流星では非常に新しいです。しかし、私は動作する何かをしているが、それが正しい方法であるか、それを行うための他のより良い方法があるかどうかを知りたい。なぜ私は非常によく理解できるウェブ上のコードを見ているので、これは私がそれがすべきだと思うように行うことを好む理由であると思います。

選択肢は、車のブランドのものと、2番目のものは、選択したブランドのモデルです。

私は流星1.3でセッションを使用しています（ただし、私は少しでも反応性の高いvarsを使用することができます）。

現在、セキュリティ上の問題は考慮しないでください。

ありがとうございます。ここで

は私のコードです：

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

流星で、このための古典的なパターンは、イベントによって設定され、依存メニューのデータコンテキストを駆動するSession変数を使用することです。 1つの変数（または反応変数）が必要なのは1つだけなので、コードを簡単に簡略化できます。

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に変更はありません。