Problem bei Menue-Erstellung: if-else-kaskaden vermeiden



  • SeppJ schrieb:

    Indem du es automatisierst. Du baust eine entsprechende Datenstruktur in der steht, was wann angezeigt werden soll und dann iterierst du über diese Datenstruktur.

    sowas in der Art schwebt mir auch schon lange im Kopf rum, allerdings hört sich das einfacher an, als es für mich zu sein scheint. Zugegeben, bei einem reinen Kontextmenü könnte mir das helfen und ich behalts im Hinterkopf.
    Mein jetziges Problem ist ähnlich, nur sind diesmal die Bereiche, die an eine (oder mehrere) Bedingungen geknüpft sind, recht unterschiedlich

    Mal ein Beispiel, wie es derzeit aussieht:

    {wenn seite=x oder seite=y}
    <ul>
       <li {wenn seite=x}class="markiert"{/wenn}>link zu x</li>
       <li {wenn seite=y && andere_bedingung}class="markiert"{/wenn}>link zu y
          <ul><li {wenn globale_variable=bla}class="markiert"{/wenn}>unterseite</li></ul>
       </li>
    </ul>
    {/wenn}
    
    // weitere Inhalte
    

    Die Bedingung, die wie in dem ersten Link aufgebaut ist, konnte ich schon auslagern und aus den Templates kicken, das wars aber auch schon.

    Naja... ich befürchte, da gibts kein Patentrezept und ohne Kenntnis der genauen Struktur kann ich wohl nicht erwarten, dass mir jemand dabei helfen kann (das ganze ist ein wenig komplizierter, als ich es hier darstellen kann)

    Danke euch trotzdem. Den Thread dürft ihr ruhig unter "der TE hat nur laut gedacht" ablegen 😉



  • Du hast Klassen:
    Jeder Menüpunkt ist ein Objekt der seine Bedingungen kennt:

    Da du HTML verwendest mache ich es jetzt einfach in JavaScript weils lustig ist:

    function MenuEntry(name, evalDisplay, children) {
       this.display(context) {
          var res=evalDisplay(context));
          if(res == NO_DISPLAY) return;
          var markiert ='';
          if(res == MARKIERT)
             markiert = ' class="markiert"';
          var out = '';
          if(name!=null) out='<li'+markiert+'>'+name+'</li>';
          if(children) out+='<ul>';
          for(var child : children) {
             out += child.display(context);
          }
          if(children) out+='</ul>';
       }
       return this;
    }
    
    var items = [
      new MenuEntry(
        null,
        function(context) { if(context.seite==x || context.seite==y) return DISPLAY; else return NO_DISPLAY; },
        [
          new MenuEntry(
            'link zu x',
            function(context) { if(context.seite==x) return MARKIERT; else return DISPLAY;},
            null
          ),
          new MenuEntry(
            'link zu y',
            function(context) { if(context.seite==y && context.other) return MARKIERT; else return DISPLAY; },
            [
              new MenuEntry(
                'unterseite',
                function(context) { if(globalvar == bla) return MARKIERT; else return DISPLAY; },
                null
            ]
          )
        ]
      )
    ];
    
    for(var entry : items) {
      document.write(entry.display({seite: y}));
    }
    

    Die Idee ist, dass du die logik in kleine Funktionen packst und die Baum Struktur die vererbung übernimmt.



  • Shade Of Mine schrieb:

    Da du HTML verwendest mache ich es jetzt einfach in JavaScript weils lustig ist:

    dein js schaut iwie komisch aus sowas hab ich ja noch nie gesehen, läuft das?



  • rage_quit schrieb:

    Shade Of Mine schrieb:

    Da du HTML verwendest mache ich es jetzt einfach in JavaScript weils lustig ist:

    dein js schaut iwie komisch aus sowas hab ich ja noch nie gesehen, läuft das?

    Wenn du die paar kleinen fehler korrigierst, ja.
    Zb for(var a in b) statt mit :
    Und this.display = function(context)
    Aber im prinzip wuerde es laufen

    Was kommt dir komisch vor?



  • Shade Of Mine schrieb:

    Was kommt dir komisch vor?

    ich dachte display wär eine prototyp function von MenuEntry dann hätte das so auzusehen:

    function MenuEntry(name, evalDisplay, children) {
      this.name = name || "";
      this.evalDisplay = evalDisplay || function(){};
      this.children = children || [];
    }
    MenuEntry.prototype.display = function(context){
      var res=this.evalDisplay(context));
      var markiert ='';
      var out = '';
    
      if(res == NO_DISPLAY)
        return;
    
      if(res == MARKIERT)
        markiert = ' class="markiert"';
    
      if(this.name)
        out='<li'+markiert+'>'+this.name+'</li>';
    
      if(children){
        out+='<ul>';
        var cl = this.children,l=cl.length;
        while(l--)
          out += cl[l].display(context);
        out+='</ul>';
      }
    
      return out;
    }
    

    klappt zwar sicher auch nicht ist aber schon ein bischen mehr js als dein versuch... wüsst ja gern welche slangs du da vermixt hast (as?)?



  • if(this.children.length){

    statt

    if(children){

    😞



  • danke shade. Vom Prinzip her hast du mir wohl ein paar gute Hinweise gegeben.

    Eine JS-Lösung scheidet zwar aus (ein Menü per JS aufbauen widerstrebt irgendwie meiner Web-Entwickler-Ethik :p), aber das lässt sich zum Glück auch auf php ummünzen und/oder in eine smarty-Funktion quetschen

    Das einzige Problem, was ich noch hab ist, dass ich die Templates durchaus beibehalten will. Ich will nicht, dass jemand php-Code anfassen muss, wenn er Menüpunkte editieren will 😉



  • da js immer so schlecht optimiert... damit fällt diese markiert variable weg 😉

    out+='<li';
    if(res == MARKIERT)
      out+=' class="markiert"';
    out+='>';
    if(this.name)
      out+=this.name;
    out+='</li>';
    


  • RageR schrieb:

    klappt zwar sicher auch nicht ist aber schon ein bischen mehr js als dein versuch... wüsst ja gern welche slangs du da vermixt hast (as?)?

    Du brauchst kein protype für member functions in js



  • Shade Of Mine schrieb:

    RageR schrieb:

    klappt zwar sicher auch nicht ist aber schon ein bischen mehr js als dein versuch... wüsst ja gern welche slangs du da vermixt hast (as?)?

    Du brauchst kein protype für member functions in js

    jein das kommt darauf an wo das ding hin soll... solls ein prototype sein oder nicht, das ist hier die frage!


Anmelden zum Antworten