Проблемы с обновлением вида на Meteor.js

Question

Я пытаюсь создать форму ящиков SELECT в MeteorJS. Everytime я изменяю одну ВЫБЕРИТЕ коробку, я хочу, чтобы другие ВЫБЕРИТЕ прямоугольники показывают разные значения, может быть, эта картина может помочь ...

Как я ее решил:

"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"]; 
       } 
      } 
     }); 

Template-файл:

<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

Гутен таг Хишам,

Похоже, вы пытаетесь построить набор каскадного меню. Ваш код выглядит функциональным, но чрезмерно сложным. Вы смешиваете данные с кодом, что означает, что для добавления зданий, этажей и комнат потребуются изменения кода.

Вместо сохранения отдельных массивов для 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 }