更新Meteor.js上的視圖的問題

Question

我想在MeteorJS中製作一個選擇框的窗體。每次我改變一個選擇框，我想其他的選擇框顯示不同的價值觀，也許這張照片可以幫助...

我如何解決它：

"use-strict"; 
if (Meteor.isClient) { 
Session.set('cho',false); 
Session.set('cho2',false); 
Session.set('cho3',false); 

     var building=["C1","C2","W1"], 
      floor= ["4","5","6","38","50"]; 

     Template.body.events({ 
      "change #sel_geb" : function(eve,eva){ 
       var a = $(eve.target).val(); 
       if(a==="C1"){ 
        Session.set('cho', true); 
        Session.set('cho2',false); 
        Session.set('cho3', false); 
        Meteor.flush(); 
       }else if (a ==="C2"){ 
        floor.splice(0,1); 
        Session.set('cho2', true); 
        Session.set('cho3', false); 
        Session.set('cho', false); 
        Meteor.flush(); 
       }else{ 
        Session.set('cho3', true); 
        Session.set('cho2', false); 
        Session.set('cho', false); 
       } 
      } 
     }); 

     Template.etage.helpers({ 
      floor: function(){ 
       if(Session.equals('cho',true)){ 
        return ["4"]; 
       }else if(Session.equals('cho2',true)){ 
        return ["5","6"]; 
       }else if(Session.equals('cho3',true)){ 
        return ["38","50"]; 
       }else{ 
        return ["4"]; 
       } 
      } 
     }); 

模板的文件：

<form> 
     <div class="form-group"> 
      <label for="exampleInputEmail1">Mitarbeiter</label> 
      <select class="form-control"> 
       {{> mitarbeiter}} 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Gebäude</label> 
      <select id="sel_geb" class="form-control" > 
       {{> gebaeude}} 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Etage</label> 
      <select class="form-control" id="sel_eta"> 
       {{> etage}} 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Raum</label> 
      <select class="form-control"> 
       {{> raum}} 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Aufgabe</label> 
      <select class="form-control"> 
       <option>Aufbau/Prüfung</option> 
       <option>Abbau</option> 
       <option>Support</option> 
       <option>Wöchentlicher Check</option> 
       <option>täglicher Precheck</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Veranstalltungsname</label> 
      <input type="text" id="presiname" class="form-control" placeholder="Veranstalltungsname"> 
     </div> 
     <div class="pull-right"> 
     <button type="submit" class="btn btn-primary">Weiter</button> 
     <button type="cancel" class="btn btn-danger">Beenden</button> 
    </div> 
    </form> 
<template name="mitarbeiter"> 
    {{#each names}} 
     <option>{{this}}</option> 
     {{/each}} 
</template> 
<template name="gebaeude"> 
    {{#each building}} 
     <option>{{this}}</option> 
     {{/each}} 
</template> 
<template name="etage"> 
    {{#each floor}} 
     <option>{{this}}</option> 
     {{/each}} 
</template> 
<template name="raum"> 
    {{#each room}} 
     <option>{{this}}</option> 
     {{/each}} 
</template> 

Everyting工作正常，但我不認爲這是解決此問題的最佳方法。有人有更好的想法嗎？將非常感激。

Answer 1

Güten標籤希沙姆，

它看起來像你試圖建立一套級聯菜單。你的代碼看起來很實用，但過於複雜。您正在將數據與代碼混合，這意味着添加建築物，樓層和房間將需要更改代碼。

而是保持獨立的陣列來3個的水平，考慮做，保持整個層次的對象，例如：

var gebaüde = [ 
    { name: "C1", etagen: [ 
    { anzahl: 4, räume: [ "Raum C1-4-1", "Raum C1-4-2" ]}, 
    ]}, 
    { name: "C2", etagen: [ 
    { anzahl: 5, räume: [ "Raum C2-5-1", "Raum C2-5-2" ]}, 
    { anzahl: 6, raüme: [ "Raum C2-6-1", "Raum C2-6-2" ]}, 
    ]}, 
    { name: "W1", etagen: [ 
    { anzahl: 38, räume: [ "Raum W1-38-1", "Raum W1-38-2" ]}, 
    { anzahl: 50, raüme: [ "Raum W1-50-1", "Raum W1-50-2" ]}, 
    ]} 
]; 

那麼你的代碼可以直接訪問該層次結構的任何級別，並自動獲得所有可能的它下面的選項。其次，在級聯式菜單設計中，當用戶更改菜單選項時，只需將菜單重置爲以下的級別即可。您可以通過自動進行下一個菜單選擇來簡化您的代碼，如果在該級別只有一個選擇，但如果有> 1個選項則將相關選項留空。您不應該在剛剛更改的那個級別上進行任何操作。

最後，你不必爲每個級別都有一個會話變量。您可以將整個對象保留在會話變量中，在您的案例中{ gebaüde: value, etage: value, raum: value }