更新 Meteor.js 上的视图时出现问题

Question

我正在尝试在 MeteorJS 中制作一个 SELECT 框形式。每次我更改一个 SELECT 框时，我希望其他 SELECT 框显示不同的值，也许这张图片可以帮助...

我是如何解决的：

"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>

一切正常，但我认为这不是解决此问题的最佳方法。有人有更好的想法吗？将不胜感激。

Answer 1

Güten tag Hicham，

您似乎正在尝试构建一组级联菜单。您的代码看起来很实用，但过于复杂。您将数据与代码混合在一起，这意味着添加建筑物、楼层和房间将需要更改代码。

不要为 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" ]},
  ]}
];

然后您的代码可以访问此层次结构的任何级别并自动获取其下所有可能的选项。

其次，在级联菜单设计中，当用户更改菜单选择时，您只需重置低于该级别的菜单。如果该级别只有一个选项，则可以通过自动选择 next 菜单来简化代码，但如果有 > 1 个选项，则将相关选项留空。您不必在刚刚更改的级别之上执行任何操作。

最后，您不必为每个级别都设置一个会话变量。您可以将整个对象保存在会话变量中，在您的情况下为{ gebaüde: value, etage: value, raum: value }