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ütentagHicham，

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

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

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

其次，在级联菜单设计中，当用户更改菜单选项时，您只需重置以下级别的菜单。您可以通过自动进行下一步菜单选择来简化您的代码，如果在该级别恰好只有一个选项，但如果有＆gt;则将相关选项留空。 1个选项。你不应该在刚刚改变的水平之上做任何事情。

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

在Meteor.js上更新View的问题

1 个答案: