Come creare un menu basato sui dati in JavaScript?

Question

Come creare un menu basato sui dati in JavaScript?

#1 da (2 voti)

0

Cercherò di creare un menu basato sui dati per la mia app web. L'obiettivo è essere in grado di servire diverse opzioni di menu a diversi utenti da un'API. La speranza è che il server possa restituire un oggetto JSON che definisce il menu. La sfida che sto affrontando è come definire quali opzioni del menu fanno .

let menu = {
  "settings": {
    "label": "Settings",
    "icon": "settings.png",
    "type": "menu",
    "subitems": {
        "darkmode": {
          "label": "Dark Mode",
          "type": "toggle",
          "???": "???"
        },
        "other": {
          "label": "Some other setting",
          "type": "action",
        },
    } 
  },
  "profile": {
    "label": "Profile",
    "icon": "profile.png",
    "type": "link",
  }
}

Sarebbe abbastanza semplice scorrere l'oggetto e popolare i menu, ma nei dati di esempio sopra, come potrei "attivare / disattivare" l'impostazione della modalità oscura?

L'unico pensiero che ho trovato è di avere un collegamento a qualcosa come "index.html? action = toggleDarkMode", quindi eseguire il metodo appropriato. Questo ovviamente non è l'ideale.

Ho fatto qualche ricerca su google per "Menu guidato dai dati Javascript" ma non ho avuto molta fortuna. Sono principalmente dropdown dinamici o collegamenti nav verso l'alto.

Ho anche scoperto / scoperto che è una cattiva idea solo definire i metodi nel JSON.

Scusa se questa domanda è troppo vaga, ma qualsiasi direzione sarebbe apprezzata.

javascript user-interface json

posta Scott Beeson 06.07.2018 - 14:41

fonte

1 risposta

Leggi altre domande sui tag javascript user-interface json

Approccio di progettazione comune quando si utilizza la classe serializzata da XSD Memento per la classe ereditata

score 2 · Answer 1

Una delle opzioni è avere la chiave action per ciascuno degli elementi del menu "recitazione", ad es.

let menu = {
    ...
    "darkmode": {
        ...
        "action": "toggleDarkMode",
    },
    ...
};

Potresti avere un oggetto che elenca tutte le possibili azioni, ad es.

let actions = {
    toggleDarkMode: toggleDarkMode, // a function defined somwhere else
    yetAnotherAction: () => { console.log('ACTION!'); },
};

Ora supponendo che tu abbia menuItem riferito a una delle voci del menu "recitazione", puoi semplicemente chiamare actions[menuItem.action]();

Il problema è che qualsiasi azione può essere chiamata (ad esempio utilizzando la console degli sviluppatori) ignorando il fatto che non viene indicata nel menu .

Spero che quanto sopra aiuti.